{% extends 'inventory/base.html' %}
{% load inventory_tags %}
{% block body_class %}device-list-page{% endblock %}
{% block title %}Geräte{% endblock %}
{% block content %}
<section class="page-head" data-live-refresh>
  <div><h1>Geräte</h1><p><span data-total-count>{{ total_count }}</span> Einträge</p></div>
  <div class="actions">
    <details class="menu export-menu"><summary class="btn">⇩ Exportieren</summary><div>
      <strong>Aktuelle Auswahl</strong><small>{{ total_count }} gefundene Geräte</small>
      <a href="{% url 'inventory:export-devices' 'csv' %}?scope=filtered{% if request.GET.urlencode %}&amp;{{ request.GET.urlencode }}{% endif %}">Als CSV exportieren</a>
      <a href="{% url 'inventory:export-devices' 'xlsx' %}?scope=filtered{% if request.GET.urlencode %}&amp;{{ request.GET.urlencode }}{% endif %}">Als XLSX exportieren</a>
      <a href="{% url 'inventory:export-devices' 'ods' %}?scope=filtered{% if request.GET.urlencode %}&amp;{{ request.GET.urlencode }}{% endif %}">Als ODS für LibreOffice</a>
      <hr><a href="{% url 'inventory:export-devices' 'xlsx' %}">Alle Geräte als XLSX</a><a href="{% url 'inventory:export-devices' 'ods' %}">Alle Geräte als ODS</a>
    </div></details>
    {% if can_edit_devices %}<a class="btn primary" href="{% url 'inventory:quick-add' %}">＋ Neues Gerät</a>{% endif %}
  </div>
</section>

<nav aria-label="Gerätetypen" class="form-actions"><a class="btn" href="{% url 'inventory:device-list' %}">Alle Typen</a>{% for option in types %}<a class="btn" href="?type={{ option.pk }}">{{ option.label }}</a>{% endfor %}</nav>
<form class="toolbar" method="get" id="filter-form">
  <div class="search"><span>⌕</span><input name="q" value="{{ request.GET.q }}" placeholder="Gerätenummer suchen …" inputmode="numeric" pattern="[0-9]*" autocomplete="off" aria-label="Nach Gerätenummer suchen" data-search-input></div>
  <button type="button" class="btn filter-toggle {% if has_filters %}active{% endif %}" data-filter-toggle aria-expanded="false">☷ Filter <span class="filter-count" {% if not active_filter_count %}hidden{% endif %}>{{ active_filter_count }}</span></button>
  <label class="page-size">Zeilen <select name="page_size" data-auto-submit><option {% if page_size == 25 %}selected{% endif %}>25</option><option {% if page_size == 50 %}selected{% endif %}>50</option><option {% if page_size == 100 %}selected{% endif %}>100</option></select></label>
  <button type="button" class="btn icon" data-columns-toggle title="Spalten auswählen" aria-label="Spalten auswählen">☷</button>
  <div class="column-picker" hidden data-columns-panel></div>

  <div class="filter-panel" hidden data-filter-panel>
    <header class="filter-panel-head"><div><h2>Geräte filtern</h2><p>Mehrere Angaben lassen sich miteinander kombinieren.</p></div><button type="button" class="icon-close" data-filter-close aria-label="Filter schließen">×</button></header>
    <div class="filter-panel-body">
      <section class="filter-section">
        <header><h3>Einordnung</h3><p>Status, Geräteart und Zuständigkeit</p></header>
        <div class="filter-grid filter-grid-four">
          <label>Arbeitsschritt<select name="stage"><option value="">Alle</option>{% for value, label in stages %}<option value="{{ value }}" {% if request.GET.stage == value %}selected{% endif %}>{{ label }}</option>{% endfor %}</select></label>
          <details class="multi-filter" data-multi-filter><summary><span>Status</span><b data-multi-value>Alle</b></summary><div>{% for option in statuses %}<label><input type="checkbox" name="status" value="{{ option.pk }}" {% option_checked request 'status' option.pk %}><span>{{ option.label }}</span></label>{% endfor %}</div></details>
          <details class="multi-filter" data-multi-filter><summary><span>Typ</span><b data-multi-value>Alle</b></summary><div>{% for option in types %}<label><input type="checkbox" name="type" value="{{ option.pk }}" {% option_checked request 'type' option.pk %}><span>{{ option.label }}</span></label>{% endfor %}</div></details>
          <details class="multi-filter" data-multi-filter><summary><span>Bearbeiter</span><b data-multi-value>Alle</b></summary><div>{% for option in employees %}<label><input type="checkbox" name="employee" value="{{ option.pk }}" {% option_checked request 'employee' option.pk %}><span>{{ option.code }} – {{ option.name }}</span></label>{% endfor %}</div></details>
          <details class="multi-filter" data-multi-filter><summary><span>Empfänger</span><b data-multi-value>Alle</b></summary><div>{% for option in recipients %}<label><input type="checkbox" name="recipient" value="{{ option.pk }}" {% option_checked request 'recipient' option.pk %}><span>{{ option.label }}</span></label>{% endfor %}</div></details>
        </div>
      </section>

      <section class="filter-section">
        <header><h3>Zeitraum und Preis</h3><p>Eingangsdatum und erfasster Gerätepreis</p></header>
        <div class="filter-grid filter-grid-four">
          <label>Datum von<input type="text" name="date_from" value="{{ request.GET.date_from }}" placeholder="TT.MM.JJJJ" inputmode="numeric" data-german-date></label>
          <label>Datum bis<input type="text" name="date_to" value="{{ request.GET.date_to }}" placeholder="TT.MM.JJJJ" inputmode="numeric" data-german-date></label>
          <label>Preis von<input type="number" step="0.01" min="0" name="price_min" value="{{ request.GET.price_min }}" placeholder="0,00 €"></label>
          <label>Preis bis<input type="number" step="0.01" min="0" name="price_max" value="{{ request.GET.price_max }}" placeholder="0,00 €"></label>
        </div>
      </section>

      <section class="filter-section">
        <header><h3>Technische Daten</h3><p>Speicher und Bildschirmgröße eingrenzen</p></header>
        <div class="filter-grid filter-grid-hardware">
          <fieldset><legend>RAM in GB</legend><div><label>Genau<input type="number" min="0" name="ram_exact" value="{{ request.GET.ram_exact }}"></label><label>Mindestens<input type="number" min="0" name="ram_min" value="{{ request.GET.ram_min }}"></label><label>Höchstens<input type="number" min="0" name="ram_max" value="{{ request.GET.ram_max }}"></label></div></fieldset>
          <fieldset><legend>SSD in GB</legend><div><label>Genau<input type="number" min="0" name="ssd_exact" value="{{ request.GET.ssd_exact }}"></label><label>Mindestens<input type="number" min="0" name="ssd_min" value="{{ request.GET.ssd_min }}"></label><label>Höchstens<input type="number" min="0" name="ssd_max" value="{{ request.GET.ssd_max }}"></label></div></fieldset>
          <fieldset><legend>HDD in GB</legend><div><label>Genau<input type="number" min="0" name="hdd_exact" value="{{ request.GET.hdd_exact }}"></label><label>Mindestens<input type="number" min="0" name="hdd_min" value="{{ request.GET.hdd_min }}"></label><label>Höchstens<input type="number" min="0" name="hdd_max" value="{{ request.GET.hdd_max }}"></label></div></fieldset>
          <fieldset><legend>Bildschirm in Zoll</legend><div><label>Mindestens<input type="number" step="0.1" min="0" name="display_min" value="{{ request.GET.display_min }}"></label><label>Höchstens<input type="number" step="0.1" min="0" name="display_max" value="{{ request.GET.display_max }}"></label></div></fieldset>
        </div>
      </section>

      <section class="filter-section">
        <header><h3>Prozessor</h3><p>Nach Hersteller, Leistungsklasse oder konkretem Modell filtern</p></header>
        <div class="filter-grid cpu-filter-grid">
          <details class="multi-filter" data-multi-filter><summary><span>Hersteller</span><b data-multi-value>Alle</b></summary><div>{% for value, label in cpu_vendors %}<label><input type="checkbox" name="cpu_vendor" value="{{ value }}" {% option_checked request 'cpu_vendor' value %}><span>{{ label }}</span></label>{% endfor %}</div></details>
          <details class="multi-filter" data-multi-filter><summary><span>CPU-Klasse</span><b data-multi-value>Alle</b></summary><div>{% for value, label in cpu_families %}<label><input type="checkbox" name="cpu_family" value="{{ value }}" {% option_checked request 'cpu_family' value %}><span>{{ label }}</span></label>{% endfor %}</div></details>
          <label class="cpu-search-field">CPU-Modell<input name="cpu_contains" value="{{ request.GET.cpu_contains }}" placeholder="z. B. i5 8500 oder Ryzen 5" autocomplete="off" data-cpu-autocomplete></label>
        </div>
      </section>

      <section class="filter-section">
        <header><h3>Ausstattung und Stichwörter</h3><p>Verbindungen und Textangaben durchsuchen</p></header>
        <div class="filter-grid filter-grid-six">
          <label>WLAN<select name="wifi"><option value="">Alle</option><option value="YES" {% option_selected request 'wifi' 'YES' %}>JA</option><option value="NO" {% option_selected request 'wifi' 'NO' %}>NEIN</option><option value="UNKNOWN" {% option_selected request 'wifi' 'UNKNOWN' %}>UNBEKANNT</option></select></label>
          <label>Akku<select name="battery"><option value="">Alle</option><option value="YES" {% option_selected request 'battery' 'YES' %}>JA</option><option value="NO" {% option_selected request 'battery' 'NO' %}>NEIN</option><option value="UNKNOWN" {% option_selected request 'battery' 'UNKNOWN' %}>UNBEKANNT</option></select></label>
          <label>LAN<select name="lan"><option value="">Alle</option><option value="YES" {% option_selected request 'lan' 'YES' %}>JA</option><option value="NO" {% option_selected request 'lan' 'NO' %}>NEIN</option><option value="UNKNOWN" {% option_selected request 'lan' 'UNKNOWN' %}>UNBEKANNT</option></select></label>
          <label>Kamera<select name="camera"><option value="">Alle</option>{% for value, label in tristate_choices %}<option value="{{ value }}" {% option_selected request 'camera' value %}>{{ label }}</option>{% endfor %}</select></label>
          <label>Sound<select name="sound"><option value="">Alle</option>{% for value, label in tristate_choices %}<option value="{{ value }}" {% option_selected request 'sound' value %}>{{ label }}</option>{% endfor %}</select></label>
          <label>HDMI<select name="hdmi"><option value="">Alle</option>{% for value, label in tristate_choices %}<option value="{{ value }}" {% option_selected request 'hdmi' value %}>{{ label }}</option>{% endfor %}</select></label>
          <label>VGA<select name="vga"><option value="">Alle</option>{% for value, label in tristate_choices %}<option value="{{ value }}" {% option_selected request 'vga' value %}>{{ label }}</option>{% endfor %}</select></label>
          <label>DVI<select name="dvi"><option value="">Alle</option>{% for value, label in tristate_choices %}<option value="{{ value }}" {% option_selected request 'dvi' value %}>{{ label }}</option>{% endfor %}</select></label>
          <label>DP<select name="displayport"><option value="">Alle</option>{% for value, label in tristate_choices %}<option value="{{ value }}" {% option_selected request 'displayport' value %}>{{ label }}</option>{% endfor %}</select></label>
          <label>Seitenverhältnis<input name="aspect_ratio" value="{{ request.GET.aspect_ratio }}" placeholder="z. B. 16:9"></label>
          <label>Modell enthält<input name="model_contains" value="{{ request.GET.model_contains }}" placeholder="z. B. ThinkPad"></label>
          <label>Ticket enthält<input name="ticket_contains" value="{{ request.GET.ticket_contains }}"></label>
        </div>
      </section>

      {% if custom_filters %}<section class="filter-section"><header><h3>Zusatzfelder</h3></header><div class="filter-grid filter-grid-four">{% for field in custom_filters %}{% with param='custom_'|add:field.key %}<label>{{ field.name }}{% if field.field_type == 'select' %}<select name="{{ param }}"><option value="">Alle</option>{% for option in field.options.all %}{% if option.active %}<option value="{{ option.label }}" {% option_selected request param option.label %}>{{ option.label }}</option>{% endif %}{% endfor %}</select>{% else %}<input name="{{ param }}" value="{{ request.GET|get_item:param }}">{% endif %}</label>{% endwith %}{% endfor %}</div></section>{% endif %}
    </div>
    <footer class="filter-actions"><span>Die aktuelle Filterung wird auch für den Export verwendet.</span><a class="btn" href="{% url 'inventory:device-list' %}">Alles zurücksetzen</a><button class="btn primary">Filter anwenden</button></footer>
  </div>
</form>
{% if can_edit_devices %}
<form class="bulk-bar" method="post" action="{% url 'inventory:bulk-update-devices' %}" data-bulk-form hidden data-confirm="Die ausgewählten Geräte wirklich gemeinsam ändern?" data-confirm-action="Änderungen übernehmen">
  {% csrf_token %}
  <input type="hidden" name="return_query" value="{{ navigation_query }}">
  <strong><span data-bulk-count>0</span> ausgewählt</strong>
  <label>Status
    <select name="status" data-bulk-field>
      <option value="">Nicht ändern</option>
      {% for option in statuses %}<option value="{{ option.pk }}">{{ option.label }}</option>{% endfor %}
    </select>
  </label>
  <label>Empfänger
    <select name="recipient" data-bulk-field>
      <option value="">Nicht ändern</option>
      <option value="__clear__">Empfänger entfernen</option>
      {% for option in recipients %}<option value="{{ option.pk }}">{{ option.label }}</option>{% endfor %}
    </select>
  </label>
  <span data-bulk-inputs></span>
  <button type="button" class="btn small" data-bulk-clear>Auswahl aufheben</button>
  <button class="btn primary small" data-bulk-submit disabled>Änderungen übernehmen</button>
</form>
{% endif %}
<div id="device-table-container" data-initial-device="{{ request.GET.open|default:'' }}">{% include 'inventory/_device_table.html' %}</div>
{{ preference.visible_columns|json_script:"server-visible-columns" }}
{{ preference.column_order|json_script:"server-column-order" }}
{% endblock %}