<div x-data="{ ip: '{{ printer.ip_address if printer else '' }}', port: '{{ printer.port_name if printer else '' }}', portEdited: {{ 'true' if printer else 'false' }} }">
  <form hx-post="/printers" hx-target="#printer-list" hx-swap="outerHTML">

    <label>
      Printer Name
      <input type="text" name="name" placeholder="e.g. HP LaserJet 4050" required
             value="{{ printer.name if printer else '' }}">
    </label>

    <label>
      IP Address
      <input type="text" name="ip_address"
             x-model="ip"
             @input="if (!portEdited) port = 'IP_' + ip.replaceAll('.', '_')"
             placeholder="e.g. 192.168.1.100"
             required>
    </label>

    <label>
      Port Name
      <input type="text" name="port_name"
             x-model="port"
             @change="portEdited = true"
             @keydown="portEdited = true"
             placeholder="e.g. IP_192_168_1_100">
    </label>

    <label>
      Driver
      <select name="driver_id" id="printer-form-driver-select">
        <option value="">-- No driver --</option>
        {% for item in driver_data %}
        <option value="{{ item.driver.id }}"
                {% if printer and printer.driver_id == item.driver.id %}selected{% endif %}>
          {{ item.driver.original_filename }} ({{ item.names | join(', ') }})
        </option>
        {% endfor %}
      </select>
    </label>

    <label>
      Duplex Mode
      <select name="duplex_mode">
        <option value="OneSided" {% if not printer or printer.duplex_mode == 'OneSided' %}selected{% endif %}>One-Sided</option>
        <option value="LongEdge" {% if printer and printer.duplex_mode == 'LongEdge' %}selected{% endif %}>Long Edge</option>
        <option value="ShortEdge" {% if printer and printer.duplex_mode == 'ShortEdge' %}selected{% endif %}>Short Edge</option>
      </select>
    </label>

    <label>
      <input type="checkbox" name="color_mode" value="on"
             {% if not printer or printer.color_mode %}checked{% endif %}>
      Color Mode
    </label>

    <label>
      Paper Size
      <select name="paper_size">
        <option value="A4" {% if not printer or printer.paper_size == 'A4' %}selected{% endif %}>A4</option>
        <option value="Letter" {% if printer and printer.paper_size == 'Letter' %}selected{% endif %}>Letter</option>
        <option value="Legal" {% if printer and printer.paper_size == 'Legal' %}selected{% endif %}>Legal</option>
      </select>
    </label>

    <label>
      <input type="checkbox" name="collate" value="on"
             {% if not printer or printer.collate %}checked{% endif %}>
      Collate
    </label>

    <label>
      Client
      <select name="client_id">
        <option value="">-- Unassigned --</option>
        {% for c in clients %}
        <option value="{{ c.id }}"
                {% if printer and printer.client_id == c.id %}selected{% endif %}>
          {{ c.name }}
        </option>
        {% endfor %}
      </select>
    </label>

    <button type="submit">Save Printer</button>
  </form>

  <form hx-post="/drivers/upload"
        hx-target="#driver-list"
        hx-encoding="multipart/form-data"
        hx-swap="outerHTML">
    <input type="hidden" name="caller" value="printer_form">
    <label>
      Upload New Driver
      <input type="file" name="file" accept=".zip" required>
    </label>
    <button type="submit" class="secondary">Upload Driver</button>
  </form>
  <div id="driver-list" style="display:none"></div>
</div>
