{% 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>

{% if web_search_enabled() %}
<section class="card">
  <div class="card-head">
    {{ ico.i('search') }}
    <div>
      <h2 x-data x-text="$store.i18n.t('find_driver_online')">Find a driver online</h2>
      <p class="sub" x-data x-text="$store.i18n.t('find_driver_intro')">Search for a vendor-wide driver, or for an exact model. ImpTune only shows links — you download the ZIP and upload it above.</p>
    </div>
  </div>
  <div class="card-body">
    {# Two submit buttons, one form: the clicked button's `mode` value is what
       gets sent, so "generic" and "exact" are one round-trip apart. #}
    <form hx-get="/web/drivers"
          hx-target="#driver-search-results"
          hx-swap="innerHTML"
          hx-indicator="#driver-search-spinner">
      <label>
        <span class="label-text" x-data x-text="$store.i18n.t('driver_search_label')">Brand or printer model</span>
        <input type="search" name="q" list="driver-brands" placeholder="HP LaserJet M404">
      </label>
      <datalist id="driver-brands">
        {% for brand in brands %}<option value="{{ brand }}">{% endfor %}
      </datalist>
      <div class="btn-row">
        <button type="submit" class="btn" name="mode" value="generic" x-data>
          {{ ico.i('search', 14) }}<span x-text="$store.i18n.t('search_generic_btn')">Find generic driver</span>
        </button>
        <button type="submit" class="btn ghost" name="mode" value="exact" x-data
                x-text="$store.i18n.t('search_exact_btn')">Search exact model</button>
        <span id="driver-search-spinner" class="htmx-indicator" aria-busy="true"
              x-data x-text="$store.i18n.t('searching')">Searching…</span>
      </div>
    </form>
    <div id="driver-search-results"></div>
  </div>
</section>
{% endif %}

<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 %}