{% extends "base.html" %}
{% import "partials/icons.html" as ico %}

{% block head_title %}Printers · ImpTune{% endblock %}
{% block page_title %}<span x-data x-text="$store.i18n.t('printers')">Printers</span>{% endblock %}

{% block page_actions %}
<a href="/printers/new" class="btn sm">{{ ico.i('plus') }}<span x-text="$store.i18n.t('add_printer')">Add printer</span></a>
{% endblock %}

{% block content %}
<p class="page-intro" x-data x-text="$store.i18n.t('printers_intro')">A printer with a driver assigned is ready to export.</p>

<div x-data="{
       shown: 0,
       total: 0,
       recount() {
         const rows = Array.from(document.querySelectorAll('#printer-list tr[data-search]'));
         this.total = rows.length;
         const q = this.$store.filter.q.trim().toLowerCase();
         this.shown = q ? rows.filter(r => r.dataset.search.includes(q)).length : rows.length;
       }
     }"
     x-init="recount()"
     @htmx:after-swap.window="recount()">

  <div class="toolbar">
    <label class="search">
      {{ ico.i('search') }}
      <input type="search" x-model="$store.filter.q" @input="recount()"
             :placeholder="$store.i18n.t('filter_printers')"
             :aria-label="$store.i18n.t('filter_printers')">
    </label>
    <span class="filter-count" x-show="$store.filter.q.trim()" x-text="shown + ' / ' + total"></span>
    <span class="spacer"></span>
    {% if printer_count %}
    <span class="badge ok">{{ ico.i('check', 12) }}{{ ready_count }}&nbsp;<span x-text="$store.i18n.t('ready_to_export')">Ready</span></span>
    {% if printer_count - ready_count %}
    <span class="badge warn">{{ ico.i('alert', 12) }}{{ printer_count - ready_count }}&nbsp;<span x-text="$store.i18n.t('needs_driver')">Driver needed</span></span>
    {% endif %}
    {% endif %}
  </div>

  {% include "partials/printer_list.html" %}

  <p class="empty-state" x-show="$store.filter.q.trim() && shown === 0" style="display:none"
     x-text="$store.i18n.t('no_match')">No printer matches this filter.</p>
</div>
{% endblock %}