ImpTune/imptune/templates/partials/printer_edit_modal.html

{% import "partials/icons.html" as ico %}
<!-- Edit trigger — sits in the row's Actions cell -->
<button class="btn ghost sm"
        onclick="document.getElementById('edit-modal-{{ p.id }}').showModal()"
        x-data>
  {{ ico.i('pencil', 14) }}<span x-text="$store.i18n.t('edit')">Edit</span>
</button>

<!-- Edit dialog — native <dialog>, no extra library -->
<dialog id="edit-modal-{{ p.id }}">
  <article>
    <div x-data="{ ip: '{{ p.ip_address }}', port: '{{ p.port_name }}', portEdited: true }">
      <form hx-patch="/printers/{{ p.id }}"
            hx-target="#printer-list"
            hx-swap="outerHTML"
            hx-on::after-request="document.getElementById('edit-modal-{{ p.id }}').close()">

        <div class="dialog-head">
          <h3 x-text="$store.i18n.t('edit_printer_title')">Edit printer</h3>
          {# No aria-label="Close": Pico hooks that attribute to draw its own
             floated X icon, which fights this button's glyph and placement. #}
          <button type="button" class="icon-btn close"
                  :aria-label="$store.i18n.t('cancel')"
                  onclick="document.getElementById('edit-modal-{{ p.id }}').close()">&times;</button>
        </div>

        <div class="dialog-body">
          <fieldset class="form-section">
            <legend x-text="$store.i18n.t('section_identity')">Identity</legend>
            <label>
              <span class="label-text" x-text="$store.i18n.t('printer_name')">Printer name</span>
              <input type="text" name="name" value="{{ p.name }}" required>
            </label>
            <label>
              <span class="label-text" x-text="$store.i18n.t('client')">Client</span>
              <select name="client_id">
                <option value="" x-text="$store.i18n.t('unassigned_option')">Unassigned</option>
                {% for c in clients %}
                <option value="{{ c.id }}" {% if p.client_id == c.id %}selected{% endif %}>{{ c.name }}</option>
                {% endfor %}
              </select>
            </label>
          </fieldset>

          <fieldset class="form-section">
            <legend x-text="$store.i18n.t('section_connection')">Network connection</legend>
            <div class="form-row">
              <label>
                <span class="label-text" x-text="$store.i18n.t('ip_address')">IP address</span>
                <input type="text" name="ip_address" class="mono"
                       x-model="ip"
                       @input="if (!portEdited) port = 'IP_' + ip.replaceAll('.', '_')"
                       required>
              </label>
              <label>
                <span class="label-text" x-text="$store.i18n.t('port_name')">Port name</span>
                <input type="text" name="port_name" class="mono"
                       x-model="port"
                       @change="portEdited = true"
                       @keydown="portEdited = true">
              </label>
            </div>
          </fieldset>

          <fieldset class="form-section">
            <legend x-text="$store.i18n.t('section_driver')">Driver</legend>
            <label>
              <select name="driver_id">
                <option value="" x-text="$store.i18n.t('no_driver_option')">No driver</option>
                {% for item in driver_data %}
                <option value="{{ item.driver.id }}"
                        {% if p.driver_id == item.driver.id %}selected{% endif %}>
                  {{ item.driver.original_filename }}{% if item.names %} — {{ item.names | join(', ') }}{% endif %}
                </option>
                {% endfor %}
              </select>
              <span class="hint" x-text="$store.i18n.t('hint_driver')">Without a driver the printer is saved, but export stays locked.</span>
            </label>
          </fieldset>

          <fieldset class="form-section">
            <legend x-text="$store.i18n.t('section_defaults')">Print defaults</legend>
            <div class="form-row">
              <label>
                <span class="label-text" x-text="$store.i18n.t('duplex_mode')">Duplex mode</span>
                <select name="duplex_mode">
                  <option value="OneSided" {% if p.duplex_mode == 'OneSided' %}selected{% endif %} x-text="$store.i18n.t('one_sided')">One-sided</option>
                  <option value="LongEdge" {% if p.duplex_mode == 'LongEdge' %}selected{% endif %} x-text="$store.i18n.t('long_edge')">Long edge</option>
                  <option value="ShortEdge" {% if p.duplex_mode == 'ShortEdge' %}selected{% endif %} x-text="$store.i18n.t('short_edge')">Short edge</option>
                </select>
              </label>
              <label>
                <span class="label-text" x-text="$store.i18n.t('paper_size')">Paper size</span>
                <select name="paper_size">
                  <option value="A4" {% if p.paper_size == 'A4' %}selected{% endif %}>A4</option>
                  <option value="Letter" {% if p.paper_size == 'Letter' %}selected{% endif %}>Letter</option>
                  <option value="Legal" {% if p.paper_size == 'Legal' %}selected{% endif %}>Legal</option>
                </select>
              </label>
            </div>
            <div class="check-row">
              <label>
                <input type="checkbox" name="color_mode" value="on" {% if p.color_mode %}checked{% endif %}>
                <span x-text="$store.i18n.t('color_mode')">Color</span>
              </label>
              <label>
                <input type="checkbox" name="collate" value="on" {% if p.collate %}checked{% endif %}>
                <span x-text="$store.i18n.t('collate')">Collate</span>
              </label>
            </div>
          </fieldset>
        </div>

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