{% extends 'base.html' %}
{% block title %}Lager | Filament Manager{% endblock %}
{% block body_class %}page-warehouses{% endblock %}
{% block page_title %}Lagerverwaltung{% endblock %}
{% block page_subtitle %}Slot-Kapazitaet, automatische Slotvergabe, Overflow ins temporaere Lager und visuelle Slot-Raster-Ansicht.{% endblock %}
{% block page_toolbar %}
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:domain-plus" aria-hidden="true"></iconify-icon> Lager
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">Lagerverwaltung</div>
    <div class="row-action-menu-note muted tiny">Neue Lager anlegen und zwischen Rasteransicht, Bestandsliste und Historie wechseln.</div>
    <button type="button" class="sci-btn subtle small menu-action-btn" data-open-create-warehouse><iconify-icon icon="mdi:domain-plus" aria-hidden="true"></iconify-icon> Neues Lager</button>
    <a class="sci-btn subtle small menu-action-btn" href="#warehouse-{{ warehouse_cards[0].warehouse.id if warehouse_cards else '' }}"><iconify-icon icon="mdi:layers-triple-outline" aria-hidden="true"></iconify-icon> Zum Slot-Raster</a>
  </div>
</details>
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:tray-arrow-up" aria-hidden="true"></iconify-icon> Export & Label
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">Ausgabe</div>
    <div class="row-action-menu-note muted tiny">Bestaende exportieren und direkt in die Label-Werkzeuge springen.</div>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.warehouses_export_pdf') }}"><iconify-icon icon="mdi:file-pdf-box" aria-hidden="true"></iconify-icon> Lagerbestand PDF</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.report_lagerstatus_pdf') }}"><iconify-icon icon="mdi:file-document-outline" aria-hidden="true"></iconify-icon> Report Lagerstatus</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.report_rollenvorrat_pdf') }}"><iconify-icon icon="mdi:file-document-multiple-outline" aria-hidden="true"></iconify-icon> Report Rollenvorrat</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.report_bestellzettel_pdf') }}"><iconify-icon icon="mdi:cart-outline" aria-hidden="true"></iconify-icon> Report Bestellzettel</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.labels') }}"><iconify-icon icon="mdi:label-outline" aria-hidden="true"></iconify-icon> Label Tool</a>
  </div>
</details>
<details class="row-action-menu page-toolbar-menu">
  <summary class="sci-btn small row-action-menu-trigger">
    <iconify-icon icon="mdi:vector-link" aria-hidden="true"></iconify-icon> Wechsel
    <iconify-icon class="menu-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
  </summary>
  <div class="row-action-menu-list page-toolbar-menu-list">
    <div class="row-action-menu-head">Navigation</div>
    <div class="row-action-menu-note muted tiny">Zwischen Lager, Spulen und globalen Materialdaten wechseln.</div>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.spools') }}"><iconify-icon icon="mdi:format-list-bulleted" aria-hidden="true"></iconify-icon> Spulen</a>
    <a class="sci-btn subtle small menu-action-btn" href="{{ url_for('web.filaments') }}"><iconify-icon icon="mdi:vector-polyline" aria-hidden="true"></iconify-icon> Globale Filamente</a>
  </div>
</details>
{% endblock %}
{% block content %}
<section class="sci-panel section-gap">
  <div class="section-head">
    <h2 class="sci-h2">Lagerstamm</h2>
    <div class="sci-actions">
      <label class="check-line compact warehouse-archive-toggle">
        <input type="checkbox" id="toggleArchivedWarehouses">
        Archivierte Lager anzeigen
      </label>
    </div>
  </div>
  <div class="table-wrap">
    <table class="sci-table">
      <thead><tr><th>Name</th><th>Code</th><th>Beschreibung</th><th>Slots</th><th>Rollen</th><th>Bestand</th><th>Reserviert</th><th>Status</th><th>Aktionen</th></tr></thead>
      <tbody>
        {% for warehouse in warehouses %}
        <tr data-warehouse-archived="{{ 1 if warehouse.is_deleted else 0 }}">
          <td><strong>{{ warehouse.name }}</strong></td>
          <td>{{ warehouse.code or '-' }}</td>
          <td>{{ warehouse.description or '-' }}</td>
          <td>{{ warehouse.occupied_slots }} / {{ warehouse.max_slots }}<div class="muted">{{ warehouse.free_slots }} frei</div></td>
          <td>{{ warehouse.spool_count }}</td>
          <td>{{ warehouse.remaining_total_g }} g</td>
          <td>{{ warehouse.reserved_total_g }} g</td>
          <td><span class="sci-badge {% if warehouse.is_deleted %}archiviert{% else %}ok{% endif %}">{% if warehouse.is_deleted %}archiviert{% else %}aktiv{% endif %}</span></td>
          <td class="sci-actions">
            {% if not warehouse.is_deleted %}
            <button type="button" class="sci-btn small" data-open-edit-warehouse data-id="{{ warehouse.id }}"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon> Bearbeiten</button>
            <button type="button" class="sci-btn subtle small" data-open-delete-warehouse data-id="{{ warehouse.id }}"><iconify-icon icon="{% if warehouse.code == 'TEMP' or warehouse.name.startswith('Tempor') %}mdi:delete-outline{% else %}mdi:archive-outline{% endif %}" aria-hidden="true"></iconify-icon> {% if warehouse.code == 'TEMP' or warehouse.name.startswith('Tempor') %}Entfernen{% else %}Archivieren{% endif %}</button>
            {% else %}
            <span class="muted">Nur Historie</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="9" class="empty-cell">Keine Lager vorhanden.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="warehouse-archive-hint section-gap">
    <strong>Hinweis: Nur leer archivieren.</strong>
  </div>
</section>

<section class="section-gap warehouse-list-stack">
  {% for entry in warehouse_cards %}
  <details
    id="warehouse-{{ entry.warehouse.id }}"
    class="sci-panel warehouse-visual-panel warehouse-collapsible {% if entry.is_archived %}is-archived{% endif %}"
    data-warehouse-archived="{{ 1 if entry.is_archived else 0 }}"
    {% if entry.open_by_default %}open{% endif %}
  >
    <summary class="warehouse-collapse-head">
      <div>
        <h2 class="sci-h2">{{ entry.warehouse.name }}</h2>
        <div class="muted">{{ entry.warehouse.spool_count }} Rollen | {{ entry.warehouse.remaining_total_g }} g Bestand | {{ entry.warehouse.reserved_total_g }} g reserviert</div>
        <div class="warehouse-collapse-progress">
          <div class="warehouse-collapse-progress-track">
            <div class="warehouse-collapse-progress-fill" style="width: {{ ((entry.occupied_slots / entry.total_slots) * 100)|round(1) if entry.total_slots else 0 }}%;"></div>
          </div>
          <div class="warehouse-collapse-progress-meta">{{ entry.occupied_slots }} / {{ entry.total_slots }} Slots belegt ({{ ((entry.occupied_slots / entry.total_slots) * 100)|round(1) if entry.total_slots else 0 }} %)</div>
        </div>
        <div class="warehouse-collapse-slot-preview">
          {% for slot in entry.slots[:30] %}
          <span class="warehouse-collapse-slot-dot {% if slot.spool %}is-filled{% else %}is-empty{% endif %}" style="--slot-preview-color: {{ slot.spool.color_hex if slot.spool and slot.spool.color_hex else '#7f95ad' }};" title="Slot {{ slot.slot_number }}{% if slot.spool %} | {{ slot.spool.brand }} {{ slot.spool.material }} {{ slot.spool.color_name }}{% endif %}"></span>
          {% endfor %}
          {% if entry.slots|length > 30 %}
          <span class="warehouse-collapse-slot-more">+{{ entry.slots|length - 30 }}</span>
          {% endif %}
        </div>
      </div>
      <div class="warehouse-head-meta">
        <div class="warehouse-slot-hint">Slots 1-{{ entry.total_slots }} von {{ entry.total_slots }}</div>
        <div class="warehouse-capacity-line"><strong>{{ entry.occupied_slots }}</strong> belegt / <strong>{{ entry.total_slots }}</strong> gesamt | {{ entry.free_slots }} frei</div>
        <span class="sci-badge {% if entry.warehouse.is_deleted %}archiviert{% else %}ok{% endif %}">{% if entry.warehouse.is_deleted %}archiviert{% else %}aktiv{% endif %}</span>
      </div>
    </summary>

    <div class="warehouse-collapse-body">
      <div class="warehouse-slot-grid-wrap">
        <div class="warehouse-slot-grid">
          {% for slot in entry.slots %}
          <article
            class="warehouse-slot-card {% if not slot.spool %}is-empty{% endif %}"
            data-slot-card
            data-spool-id="{{ slot.spool.id if slot.spool else '' }}"
            data-filament-id="{{ slot.spool.filament_id if slot.spool else '' }}"
            data-warehouse-id="{{ entry.warehouse.id }}"
            data-slot-number="{{ slot.slot_number }}"
            style="--slot-color: {{ slot.spool.color_hex if slot.spool and slot.spool.color_hex else '#8aa0b8' }}; --slot-color-soft: {{ (slot.spool.color_hex if slot.spool and slot.spool.color_hex else '#8aa0b8') ~ '33' }}; --slot-color-strong: {{ (slot.spool.color_hex if slot.spool and slot.spool.color_hex else '#8aa0b8') ~ '88' }};"
          >
            <div class="warehouse-slot-card-head">
              <span class="warehouse-slot-pill">Slot {{ slot.slot_number }}</span>
              {% if slot.spool %}
              {% set role_status_key = (slot.spool.role_status_key or 'free')|lower %}
              {% set role_status_label = {
                'free': 'Verfügbar',
                'reserved': 'Reserviert',
                'in-use': 'Entnahme',
                'empty': 'Leer',
              }.get(role_status_key, 'Verfügbar') %}
              <details class="row-action-menu warehouse-slot-role-menu" data-slot-role-menu>
                <summary
                  class="warehouse-slot-role-badge is-{{ role_status_key }}"
                  data-slot-role-status-current="{{ role_status_key }}"
                  aria-label="Rollenstatus aendern"
                  title="Rollenstatus aendern"
                >
                  <span class="warehouse-slot-role-badge-text" data-slot-role-status-label>{{ role_status_label }}</span>
                  <iconify-icon class="warehouse-slot-role-caret" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
                </summary>
                <div class="row-action-menu-list warehouse-slot-role-list">
                  <button type="button" class="warehouse-slot-role-option app-context-item {% if role_status_key == 'free' %}is-active{% endif %}" data-slot-role-option data-id="{{ slot.spool.id }}" data-spool-status-set="free" aria-pressed="{% if role_status_key == 'free' %}true{% else %}false{% endif %}"><span class="warehouse-slot-role-option-label app-context-item-label">Verfügbar</span></button>
                  <button type="button" class="warehouse-slot-role-option app-context-item {% if role_status_key == 'reserved' %}is-active{% endif %}" data-slot-role-option data-id="{{ slot.spool.id }}" data-spool-status-set="reserved" aria-pressed="{% if role_status_key == 'reserved' %}true{% else %}false{% endif %}"><span class="warehouse-slot-role-option-label app-context-item-label">Reserviert</span></button>
                  <button type="button" class="warehouse-slot-role-option app-context-item {% if role_status_key == 'in-use' %}is-active{% endif %}" data-slot-role-option data-id="{{ slot.spool.id }}" data-spool-status-set="in-use" aria-pressed="{% if role_status_key == 'in-use' %}true{% else %}false{% endif %}"><span class="warehouse-slot-role-option-label app-context-item-label">Entnahme</span></button>
                  <button type="button" class="warehouse-slot-role-option app-context-item is-danger {% if role_status_key == 'empty' %}is-active{% endif %}" data-slot-role-option data-id="{{ slot.spool.id }}" data-spool-status-set="empty" aria-pressed="{% if role_status_key == 'empty' %}true{% else %}false{% endif %}"><span class="warehouse-slot-role-option-label app-context-item-label">Leer</span></button>
                </div>
              </details>
              {% endif %}
              <span class="warehouse-slot-status {% if slot.spool %}is-filled{% else %}is-free{% endif %}">{% if slot.spool %}belegt{% else %}frei{% endif %}</span>
            </div>
            {% if slot.spool %}
            {% set color_mode = (slot.spool.filament_color_mode or slot.spool.color_mode or 'single')|lower %}
            {% set nozzle_temp = slot.spool.print_temp_c if slot.spool.print_temp_c not in [None, ''] else slot.spool.filament_print_temp_c %}
            {% set bed_temp = slot.spool.bed_temp_c if slot.spool.bed_temp_c not in [None, ''] else slot.spool.filament_bed_temp_c %}
            {% set chamber_temp = slot.spool.filament_chamber_temp_c|default('', true) %}
            {% set fan_percent = slot.spool.filament_fan_percent|default('', true) %}
            {% set diameter_mm = slot.spool.diameter_mm if slot.spool.diameter_mm not in [None, ''] else slot.spool.filament_diameter_mm %}
            {% set density = slot.spool.filament_density_g_cm3|default('', true) %}
            {% set net_weight_g = (slot.spool.net_weight_g or 0)|int %}
            {% set remaining_weight_g = (slot.spool.remaining_g or 0)|int %}
            {% set fill_percent = 0 %}
            {% if net_weight_g > 0 %}
            {% set fill_percent = ((remaining_weight_g / net_weight_g) * 100)|round(0, 'common')|int %}
            {% endif %}
            {% if fill_percent < 0 %}
            {% set fill_percent = 0 %}
            {% elif fill_percent > 100 %}
            {% set fill_percent = 100 %}
            {% endif %}
            <div class="warehouse-slot-card-body warehouse-slot-card-body--flip">
              <div class="warehouse-slot-flip">
                <div class="warehouse-slot-flip-inner">
                  <section class="warehouse-slot-face warehouse-slot-face--front">
                    <div class="warehouse-slot-visual">
                      <div class="filament-reel" aria-hidden="true">
                        <span class="filament-reel-core"></span>
                        <span class="filament-reel-hub"></span>
                        <span class="filament-reel-fx"></span>
                      </div>
                      <div class="warehouse-slot-content">
                        <div class="slot-front-brand">{{ slot.spool.brand }}</div>
                        <div class="warehouse-spool-title">{{ slot.spool.color_name or slot.spool.sku or 'Filament' }}</div>
                        <div class="slot-front-material">{{ slot.spool.material or '-' }}</div>
                        <div class="slot-fill-wrap">
                          <div class="slot-fill-head">
                            <span>Fuellstand</span>
                            <strong>{{ fill_percent }} %</strong>
                          </div>
                          <div class="slot-fill-track">
                            <div class="slot-fill-bar" style="width: {{ fill_percent }}%;"></div>
                          </div>
                          <div class="slot-fill-meta">{{ remaining_weight_g }} g von {{ net_weight_g if net_weight_g > 0 else '-' }} g</div>
                        </div>
                      </div>
                    </div>
                  </section>
                  <section class="warehouse-slot-face warehouse-slot-face--back">
                    <div class="slot-back-head">
                      <div>
                        <div class="slot-back-title">Haupt-Druckdaten</div>
                        <div class="muted tiny">{{ slot.spool.material }} | {{ slot.spool.brand }}</div>
                      </div>
                      <button type="button" class="slot-glow-toggle" data-slot-glow-toggle title="Effekt-Scan" aria-label="Effekt-Scan">
                        <iconify-icon icon="mdi:flashlight" aria-hidden="true"></iconify-icon>
                      </button>
                    </div>
                    <div class="slot-print-grid">
                      <div class="slot-print-cell"><span>Duese</span><strong>{{ nozzle_temp ~ ' C' if nozzle_temp not in [None, ''] else '-' }}</strong></div>
                      <div class="slot-print-cell"><span>Bett</span><strong>{{ bed_temp ~ ' C' if bed_temp not in [None, ''] else '-' }}</strong></div>
                      <div class="slot-print-cell"><span>Kammer</span><strong>{{ chamber_temp ~ ' C' if chamber_temp not in [None, ''] else '-' }}</strong></div>
                      <div class="slot-print-cell"><span>Luefter</span><strong>{{ fan_percent ~ ' %' if fan_percent not in [None, ''] else '-' }}</strong></div>
                      <div class="slot-print-cell"><span>Durchmesser</span><strong>{{ diameter_mm ~ ' mm' if diameter_mm not in [None, ''] else '-' }}</strong></div>
                      <div class="slot-print-cell"><span>Dichte</span><strong>{{ density ~ ' g/cm3' if density not in [None, ''] else '-' }}</strong></div>
                    </div>
                    <div class="slot-back-effects-zone">
                      <div class="slot-back-section-label">Farbe und Eigenschaften</div>
                      <div class="slot-color-visual">
                        <div class="slot-color-bar {% if color_mode in ['rainbow', 'multi'] %}is-gradient{% else %}is-solid{% endif %}"></div>
                        <div class="slot-color-meta">
                          <span>{{ slot.spool.color_name or '-' }}</span>
                          <span>{{ slot.spool.filament_color_family or slot.spool.color_family or '-' }}</span>
                        </div>
                      </div>
                      <div class="slot-effect-iconline" data-slot-effect-icons></div>
                    </div>
                  </section>
                </div>
              </div>
            </div>
            <div class="slot-card-actions slot-card-actions--footer">
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-edit-spool data-id="{{ slot.spool.id }}" title="Bearbeiten" aria-label="Bearbeiten"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-filament-detail data-filament-id="{{ slot.spool.filament_id or '' }}" data-spool-id="{{ slot.spool.id }}" title="Details" aria-label="Details"><iconify-icon icon="mdi:information-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-label-modal data-spool-id="{{ slot.spool.id }}" title="Label" aria-label="Label"><iconify-icon icon="mdi:label-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-transfer data-id="{{ slot.spool.id }}" data-name="{{ slot.spool.brand }} {{ slot.spool.material }} {{ slot.spool.color_name }}" title="Umlagern" aria-label="Umlagern"><iconify-icon icon="mdi:swap-horizontal" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-consume data-id="{{ slot.spool.id }}" data-name="{{ slot.spool.brand }} {{ slot.spool.material }} {{ slot.spool.color_name }}" title="Entnahme" aria-label="Entnahme"><iconify-icon icon="mdi:fire-circle" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-action="archive" data-id="{{ slot.spool.id }}" data-confirm="Rolle {{ slot.spool.brand }} {{ slot.spool.material }} {{ slot.spool.color_name }} wirklich loeschen/archivieren?" title="Loeschen" aria-label="Loeschen"><iconify-icon icon="mdi:delete-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-slot-blink data-warehouse-id="{{ entry.warehouse.id }}" data-slot-number="{{ slot.slot_number }}" title="Blinken" aria-label="Blinken"><iconify-icon icon="mdi:led-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-weigh-spool-mini data-id="{{ slot.spool.id }}" data-name="{{ slot.spool.brand }} {{ slot.spool.material }} {{ slot.spool.color_name }}" title="Wiegen" aria-label="Wiegen"><iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon></button>
            </div>
            {% else %}
            <div class="warehouse-slot-card-body empty">
              <div class="warehouse-slot-visual">
                <div class="filament-reel is-empty" aria-hidden="true">
                  <span class="filament-reel-core"></span>
                  <span class="filament-reel-hub"></span>
                </div>
                <div class="warehouse-slot-content">
                  <div class="warehouse-spool-title muted">Freier Lagerplatz</div>
                  <div class="muted">Slot kann fuer eine neue oder umgelagerte Rolle verwendet werden.</div>
                </div>
              </div>
            </div>
            <div class="slot-card-actions slot-card-actions--footer is-empty-actions">
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-slot-blink data-warehouse-id="{{ entry.warehouse.id }}" data-slot-number="{{ slot.slot_number }}" title="Blinken" aria-label="Blinken"><iconify-icon icon="mdi:led-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-create-spool data-warehouse-id="{{ entry.warehouse.id }}" data-slot-number="{{ slot.slot_number }}" title="Neue Spule anlegen" aria-label="Neue Spule anlegen"><iconify-icon icon="mdi:plus-circle-outline" aria-hidden="true"></iconify-icon></button>
              <button type="button" class="sci-btn subtle small slot-icon-btn" data-open-slot-assign data-warehouse-id="{{ entry.warehouse.id }}" data-slot-number="{{ slot.slot_number }}" title="Bestehende Spule zuordnen" aria-label="Bestehende Spule zuordnen"><iconify-icon icon="mdi:vector-link" aria-hidden="true"></iconify-icon></button>
            </div>
            {% endif %}
          </article>
          {% endfor %}
        </div>
      </div>
    </div>
  </details>
  {% endfor %}
</section>

<section class="sci-panel section-gap warehouse-history-compact">
  <div class="section-head"><h2 class="sci-h2">Lagerhistorie</h2></div>
  <div class="table-wrap">
    <table class="sci-table filament-table-compact">
      <thead><tr><th>Zeit</th><th>Event</th><th>Name-Snapshot</th><th>Details</th></tr></thead>
      <tbody>
        {% for event in warehouse_history %}
        <tr><td>{{ event.created_at }}</td><td>{{ event.event_type }}</td><td>{{ event.warehouse_name_snapshot }}</td><td>{{ event.details or '-' }}</td></tr>
        {% else %}
        <tr><td colspan="4" class="empty-cell">Keine Historie vorhanden.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}
{% block data_blocks %}
<script id="warehouse-options" type="application/json">{{ warehouses_json|tojson }}</script>
<script id="spool-options" type="application/json">{{ spools_json|tojson }}</script>
<script id="filament-options-endpoint" type="application/json">{{ {'url': filament_modal_options_url}|tojson }}</script>
<script id="filament-datasheets-map" type="application/json">{{ filament_datasheets_map|tojson }}</script>
<script id="manufacturer-profiles" type="application/json">{{ manufacturer_profiles_json|tojson }}</script>
<script>
(() => {
  const toggle = document.getElementById('toggleArchivedWarehouses');
  if (!toggle) return;
  const applyState = () => {
    document.body.classList.toggle('show-archived-warehouses', toggle.checked);
  };
  toggle.addEventListener('change', applyState);
  applyState();
})();
</script>
{% endblock %}