{% import "partials/icons.html" as ico %}
{% set usage = usage | default({}, true) %}
{% set new_driver_id = new_driver_id | default(None, true) %}
<div id="driver-list">
  {% if parsed is defined and parsed.unused_files %}
  <div class="notice">
    <p>
      {{ parsed.unused_files | length }}
      <span x-data x-text="$store.i18n.t('unused_files')">file(s) in the ZIP are unused — the .inf never references them.</span>
    </p>
    <details>
      <summary x-data x-text="$store.i18n.t('show_unused')">Show unused files</summary>
      <ul>
        {% for f in parsed.unused_files %}
        <li>{{ f }}</li>
        {% endfor %}
      </ul>
    </details>
  </div>
  {% endif %}

  {% if driver_data %}
  <div class="card card-flush">
    <div class="table-scroll">
      <table class="data-table">
        <thead>
          <tr>
            <th x-data x-text="$store.i18n.t('driver_filename')">File</th>
            <th x-data x-text="$store.i18n.t('driver_names_col')">Driver name(s)</th>
            <th class="col-arch" x-data x-text="$store.i18n.t('architecture')">Architecture</th>
            <th class="col-used" x-data x-text="$store.i18n.t('th_used_by')">Used by</th>
            <th class="col-added" x-data x-text="$store.i18n.t('uploaded_at')">Added</th>
          </tr>
        </thead>
        <tbody>
          {% for item in driver_data %}
          <tr>
            <td>
              <span class="cell-name mono">{{ item.driver.original_filename }}</span>
              <span class="cell-sub">
                {% if item.driver.size_bytes >= 1048576 %}{{ (item.driver.size_bytes / 1048576) | round(1) }} MB{% elif item.driver.size_bytes >= 1024 %}{{ (item.driver.size_bytes / 1024) | round(0) | int }} KB{% else %}{{ item.driver.size_bytes }} B{% endif %}
                {% if item.driver.inf_filename %} &middot; {{ item.driver.inf_filename }}{% endif %}
              </span>
            </td>
            <td>
              {% if item.names %}
              {# Multi-model INFs can carry a dozen names — show three, fold the rest. #}
              <span class="pill-row">
                {% for name in item.names[:3] %}<span class="pill">{{ name }}</span>{% endfor %}
                {% if item.names | length > 3 %}
                <details class="more-pills">
                  <summary class="pill">+{{ item.names | length - 3 }}</summary>
                  <span class="pill-row">
                    {% for name in item.names[3:] %}<span class="pill">{{ name }}</span>{% endfor %}
                  </span>
                </details>
                {% endif %}
              </span>
              {% else %}
              <span class="faint" x-data x-text="$store.i18n.t('unknown')">Unknown</span>
              {% endif %}
            </td>
            <td class="col-arch">
              {% if item.driver.architecture %}
              <span class="badge">{{ item.driver.architecture }}</span>
              {% else %}
              <span class="faint" x-data x-text="$store.i18n.t('unknown')">Unknown</span>
              {% endif %}
            </td>
            <td class="num col-used">
              {% set n = usage.get(item.driver.id, 0) %}
              {% if n %}<a href="/printers">{{ n }}</a>{% else %}<span class="faint">0</span>{% endif %}
            </td>
            <td class="num col-added">
              {{ item.driver.uploaded_at.strftime('%Y-%m-%d %H:%M') if item.driver.uploaded_at is not string else item.driver.uploaded_at }}
              {% if new_driver_id and item.driver.id == new_driver_id %}
              <span class="badge ok">{{ ico.i('check', 12) }}new</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="card">
    <div class="empty">
      <span class="empty-ico">{{ ico.i('driver', 18) }}</span>
      <strong x-data x-text="$store.i18n.t('no_drivers')">No drivers uploaded yet.</strong>
      <p x-data x-text="$store.i18n.t('hint_driver_zip')">The ZIP must contain the .inf file and every file it references.</p>
    </div>
  </div>
  {% endif %}
</div>