ImpTune/imptune/templates/partials/driver_edit_modal.html

{#
  Rename + icon dialog for one driver row. `item` is a build_driver_data() entry.

  The rename form and the icon forms are siblings, not nested — a form inside a
  form is invalid HTML and the browser drops the inner one. The footer's Save
  reaches the rename form through `form="..."`.

  Trigger is located by `button[onclick*='showModal']` in E2E specs, never by its
  label: the default language follows navigator.language.
#}
{% import "partials/icons.html" as ico %}
{% set d = item.driver %}
<button class="btn ghost sm"
        onclick="document.getElementById('driver-modal-{{ d.id }}').showModal()"
        x-data>
  {{ ico.i('pencil', 14) }}<span x-text="$store.i18n.t('edit')">Edit</span>
</button>

<dialog id="driver-modal-{{ d.id }}">
  <article>
    <div class="dialog-head">
      <h3 x-data x-text="$store.i18n.t('edit_driver_title')">Edit driver</h3>
      <button type="button" class="icon-btn close" x-data
              :aria-label="$store.i18n.t('cancel')"
              onclick="document.getElementById('driver-modal-{{ d.id }}').close()">&times;</button>
    </div>

    <div class="dialog-body">
      <form id="driver-rename-{{ d.id }}"
            hx-patch="/drivers/{{ d.id }}"
            hx-target="#driver-list"
            hx-swap="outerHTML"
            hx-on::after-request="document.getElementById('driver-modal-{{ d.id }}').close()">
        <fieldset class="form-section">
          <legend x-data x-text="$store.i18n.t('section_driver_name')">Name</legend>
          <label>
            <span class="label-text" x-data x-text="$store.i18n.t('driver_display_name')">Display name</span>
            <input type="text" name="display_name" maxlength="120"
                   value="{{ d.display_name or '' }}"
                   placeholder="{{ d.original_filename }}">
          </label>
          <span class="hint" x-data x-text="$store.i18n.t('hint_driver_rename')">Shared with everyone — the driver library is global. Leave empty to show the ZIP filename.</span>
        </fieldset>
      </form>

      <fieldset class="form-section">
        <legend x-data x-text="$store.i18n.t('icon_section')">Icon</legend>
        <div id="driver-icon-status-{{ d.id }}">
          {% if item.has_icon %}
          <div class="icon-preview">
            <img src="/drivers/{{ d.id }}/icon" width="56" height="56" alt="">
            <span class="meta">256&times;256 PNG</span>
          </div>
          {% else %}
          <p class="dim" x-data x-text="$store.i18n.t('no_driver_icon')">No icon yet.</p>
          {% endif %}
        </div>

        <form hx-post="/drivers/{{ d.id }}/icon"
              hx-target="#driver-icon-status-{{ d.id }}"
              hx-swap="innerHTML"
              hx-encoding="multipart/form-data">
          <div class="uploader">
            <input type="file" name="file" accept="image/*" required
                   x-data :aria-label="$store.i18n.t('upload_icon')">
            <div class="btn-row">
              <button type="submit" class="btn ghost sm" x-data>
                {{ ico.i('upload', 13) }}<span x-text="$store.i18n.t('upload_icon')">Upload icon</span>
              </button>
            </div>
            <p class="hint" x-data x-text="$store.i18n.t('hint_any_image')">Any image — resized to 256 × 256 PNG. 750 KB max.</p>
          </div>
        </form>

        {% if web_search_enabled() %}
        <div class="web-picker">
          <form hx-get="/web/images"
                hx-target="#driver-image-results-{{ d.id }}"
                hx-swap="innerHTML"
                hx-indicator="#driver-image-spinner-{{ d.id }}">
            <input type="hidden" name="target" value="driver">
            <input type="hidden" name="id" value="{{ d.id }}">
            <label>
              <span class="label-text" x-data x-text="$store.i18n.t('search_web_image')">Search the web for an image</span>
              <input type="search" name="q" value="{{ item.image_query }}">
            </label>
            <div class="btn-row">
              <button type="submit" class="btn ghost sm" x-data>
                {{ ico.i('search', 13) }}<span x-text="$store.i18n.t('search_btn')">Search</span>
              </button>
              <span id="driver-image-spinner-{{ d.id }}" class="htmx-indicator" aria-busy="true"
                    x-data x-text="$store.i18n.t('searching')">Searching…</span>
            </div>
          </form>
          <div id="driver-image-results-{{ d.id }}"></div>
        </div>
        {% endif %}
      </fieldset>
    </div>

    <div class="dialog-foot">
      <button type="button" class="btn ghost" x-data
              onclick="document.getElementById('driver-modal-{{ d.id }}').close()"
              x-text="$store.i18n.t('cancel')">Cancel</button>
      <button type="submit" class="btn" form="driver-rename-{{ d.id }}" x-data
              x-text="$store.i18n.t('save')">Save</button>
    </div>
  </article>
</dialog>