{% load helpers %}
{# Rendered inside the DevicePrinterPanel body on a dcim.Device detail page. #}
<table class="table table-hover panel-body attr-table">
  <tr>
    <td>Printer</td>
    <td>{{ printer|hyperlinked_object }}</td>
  </tr>
  <tr>
    <td>Fleet</td>
    <td>{{ printer.fleet|hyperlinked_object }}</td>
  </tr>
  <tr>
    <td>Make / Kind</td>
    <td>{{ printer.get_make_display }} &middot; {{ printer.get_printer_kind_display }}</td>
  </tr>
  {% if printer.grafana_monitoring_url %}
  <tr>
    <td>Live monitoring</td>
    <td>
      <a href="{{ printer.grafana_monitoring_url }}" target="_blank" rel="noopener">
        <i class="mdi mdi-chart-line"></i> Open in Grafana
      </a>
    </td>
  </tr>
  {% endif %}
  {% if latest_status %}
  <tr>
    <td>Status</td>
    <td>
      <span class="label label-default">{{ latest_status.get_printer_status_display }}</span>
      {% for err in latest_status.error_states %}
        <span class="label label-warning">{{ err }}</span>
      {% endfor %}
    </td>
  </tr>
  <tr>
    <td>Page count</td>
    <td>{{ latest_status.page_count|placeholder }}</td>
  </tr>
  {% endif %}
</table>

{% if current_supplies %}
<table class="table table-hover panel-body attr-table">
  <thead>
    <tr><th>Supply</th><th style="width: 50%;">Remaining</th></tr>
  </thead>
  <tbody>
  {% for supply in current_supplies %}
    <tr>
      <td>
        {{ supply.supply_name }}
        <span class="text-muted">({{ supply.get_supply_type_display }})</span>
      </td>
      <td>
        {% with pct=supply.percent_remaining %}
        {% if pct is not None %}
          <div class="progress" style="margin-bottom: 0;" title="{{ pct }}%">
            <div class="progress-bar{% if pct <= 15 %} progress-bar-danger{% elif pct <= 30 %} progress-bar-warning{% else %} progress-bar-success{% endif %}"
                 role="progressbar"
                 aria-valuenow="{{ pct }}" aria-valuemin="0" aria-valuemax="100"
                 style="width: {{ pct }}%; min-width: 2em;">
              {{ pct }}%
            </div>
          </div>
        {% else %}
          <span class="text-muted">unknown</span>
        {% endif %}
        {% endwith %}
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}