{% extends "base.html" %}
{% import "partials/icons.html" as ico %}

{% block head_title %}Drivers · ImpTune{% endblock %}
{% block page_title %}<span x-data x-text="$store.i18n.t('drivers_title')">Drivers</span>{% endblock %}

{% block content %}
<p class="page-intro" x-data x-text="$store.i18n.t('drivers_intro')">Drivers are shared — everyone sees the same library.</p>

<section class="card">
  <div class="card-head">
    {{ ico.i('upload') }}
    <div>
      <h2 x-data x-text="$store.i18n.t('upload_driver_section')">Add a driver package</h2>
      <p class="sub" 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>
  <div class="card-body">
    <form
      hx-post="/drivers/upload"
      hx-encoding="multipart/form-data"
      hx-target="#driver-list"
      hx-swap="outerHTML"
      hx-indicator="#upload-spinner"
    >
      <div class="uploader">
        <label for="driver-file" class="label-text" x-data x-text="$store.i18n.t('driver_package_label')">Driver package (ZIP)</label>
        <input type="file" id="driver-file" name="file" accept=".zip" required>
        <div class="btn-row">
          <button type="submit" class="btn" x-data>
            {{ ico.i('upload', 14) }}<span x-text="$store.i18n.t('upload_btn')">Upload</span>
          </button>
          <span id="upload-spinner" class="htmx-indicator" aria-busy="true"
                x-data x-text="$store.i18n.t('uploading')">Uploading…</span>
        </div>
      </div>
    </form>
  </div>
</section>

<h2 class="eyebrow" style="margin-bottom:.6rem" x-data x-text="$store.i18n.t('driver_library')">Driver library</h2>
{% include "partials/driver_list.html" %}
{% endblock %}