{% import "partials/icons.html" as ico %}
<div id="printer-list">
  {% if not grouped %}
  <div class="card">
    <div class="empty">
      <span class="empty-ico">{{ ico.i('printer', 18) }}</span>
      <strong x-data x-text="$store.i18n.t('no_printers')">No printers configured yet.</strong>
      <p x-data x-text="$store.i18n.t('step_printer_desc')">Name, IP address, driver, and the defaults the workstation gets.</p>
      <a href="/printers/new" class="btn sm" x-data>{{ ico.i('plus', 14) }}<span x-text="$store.i18n.t('add_printer')">Add printer</span></a>
    </div>
  </div>
  {% else %}
  {% for client_name, printers in grouped.items() %}
  {% set group_client_id = printers[0].client_id if printers else None %}
  {# Group search text must cover everything its rows match on, or a row can
     match while its group stays hidden. #}
  {% set gsearch = (printers | map(attribute='name') | join(' ')) ~ ' '
                 ~ (printers | map(attribute='ip_address') | join(' ')) ~ ' '
                 ~ (printers | map(attribute='port_name') | join(' ')) ~ ' '
                 ~ (printers | selectattr('driver_id') | map(attribute='driver.original_filename') | join(' ')) ~ ' '
                 ~ client_name %}
  <section class="card card-flush"
           data-search="{{ gsearch | lower }}"
           x-data
           x-show="!$store.filter.q.trim() || $el.dataset.search.includes($store.filter.q.trim().toLowerCase())">
    <div class="group-head">
      {{ ico.i('group') }}
      {% if group_client_id %}
      <h3><a href="/clients/{{ group_client_id }}">{{ client_name }}</a></h3>
      {% else %}
      <h3 x-data x-text="$store.i18n.t('unassigned')">{{ client_name }}</h3>
      {% endif %}
      <span class="count">{{ printers | length }}</span>
    </div>
    <div class="table-scroll">
      <table class="data-table">
        <thead>
          <tr>
            <th x-data x-text="$store.i18n.t('th_name')">Name</th>
            <th x-data x-text="$store.i18n.t('th_status')">Status</th>
            <th class="col-defaults" x-data x-text="$store.i18n.t('th_config')">Defaults</th>
            <th x-data x-text="$store.i18n.t('th_actions')">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for p in printers %}
          <tr data-search="{{ (p.name ~ ' ' ~ p.ip_address ~ ' ' ~ p.port_name ~ ' ' ~ client_name ~ ' ' ~ (p.driver.original_filename if p.driver_id else '')) | lower }}"
              x-data
              x-show="!$store.filter.q.trim() || $el.dataset.search.includes($store.filter.q.trim().toLowerCase())">
            <td>
              <a class="cell-name" href="/printers/{{ p.id }}">{{ p.name }}</a>
              <span class="cell-sub">{{ p.ip_address }} &middot; {{ p.port_name }}</span>
            </td>
            <td>
              {% if p.driver_id %}
              <span class="badge ok">{{ ico.i('check', 12) }}<span x-data x-text="$store.i18n.t('ready_to_export')">Ready</span></span>
              <span class="cell-sub">{{ p.driver.original_filename }}</span>
              {% else %}
              <span class="badge warn">{{ ico.i('alert', 12) }}<span x-data x-text="$store.i18n.t('needs_driver')">Driver needed</span></span>
              {% endif %}
            </td>
            <td class="col-defaults">
              <span class="pill-row">
                <span class="pill" x-data
                      x-text="$store.i18n.t('{{ 'one_sided' if p.duplex_mode == 'OneSided' else ('long_edge' if p.duplex_mode == 'LongEdge' else 'short_edge') }}')">{{ p.duplex_mode }}</span>
                <span class="pill" x-data
                      x-text="$store.i18n.t('{{ 'color_value' if p.color_mode else 'grayscale_value' }}')">{{ 'Color' if p.color_mode else 'Grayscale' }}</span>
                <span class="pill">{{ p.paper_size }}</span>
                {% if p.collate %}
                <span class="pill" x-data x-text="$store.i18n.t('collate')">Collate</span>
                {% endif %}
              </span>
            </td>
            <td class="actions">
              <span class="btn-row">
                {% if p.driver_id %}
                <a class="btn quiet sm" href="/printers/{{ p.id }}/packages/intunewin"
                   title=".intunewin">{{ ico.i('download', 14) }}</a>
                {% endif %}
                {% include "partials/printer_edit_modal.html" %}
                <button class="btn danger sm"
                        hx-delete="/printers/{{ p.id }}"
                        hx-target="#printer-list"
                        hx-swap="outerHTML"
                        hx-confirm="Delete '{{ p.name }}'?"
                        x-data :title="$store.i18n.t('delete')">
                  {{ ico.i('trash', 14) }}
                </button>
              </span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  {% endfor %}
  {% endif %}
</div>