{% extends 'base.html' %}
{% block title %}Wiegestation | Filament Manager{% endblock %}
{% block body_class %}page-weighstation{% endblock %}
{% block page_title %}Wiegestation{% endblock %}
{% block page_subtitle %}Alle aktiven Spulen auf einen Blick, direkt wiegen und die Historie der Messungen verfolgen.{% endblock %}
{% block page_toolbar %}
<a class="sci-btn subtle small" href="{{ url_for('web.weighing') }}">
  <iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon>
  Waagenverwaltung
</a>
<button type="button" class="sci-btn subtle small" data-open-scale-tools>
  <iconify-icon icon="mdi:lan-connect" aria-hidden="true"></iconify-icon>
  Waagen Tools
</button>
<button type="button" class="sci-btn subtle small" data-open-esp32-flasher>
  <iconify-icon icon="mdi:chip" aria-hidden="true"></iconify-icon>
  ESP32 Flasher
</button>
{% endblock %}
{% block content %}
<section class="sci-panel filter-panel compact page-filter-shell">
  <form class="page-filter-form" method="get">
    <div class="page-filter-main">
      <input class="sci-input filter-search" name="q" placeholder="Suche nach Hersteller, Material, Farbe, SKU, Lager" value="{{ filters.q }}">
      <select class="sci-input" name="warehouse_id">
        <option value="">Alle Lager</option>
        {% for w in warehouses %}
        <option value="{{ w.id }}" {% if filters.warehouse_id == w.id|string %}selected{% endif %}>{{ w.name }}</option>
        {% endfor %}
      </select>
      <select class="sci-input" name="stock_state">
        <option value="">Alle Zustaende</option>
        <option value="ok" {% if filters.stock_state == 'ok' %}selected{% endif %}>OK</option>
        <option value="niedrig" {% if filters.stock_state == 'niedrig' %}selected{% endif %}>Niedrig</option>
        <option value="kritisch" {% if filters.stock_state == 'kritisch' %}selected{% endif %}>Kritisch</option>
        <option value="leer" {% if filters.stock_state == 'leer' %}selected{% endif %}>Leer</option>
      </select>
    </div>
    <div class="page-filter-side">
      <button class="sci-btn small"><iconify-icon icon="mdi:filter-variant" aria-hidden="true"></iconify-icon> Filtern</button>
      <a class="sci-btn subtle small" href="{{ url_for('web.weighstation') }}">Reset</a>
    </div>
  </form>
</section>

<section class="sci-panel section-gap">
  <div class="section-head compact">
    <h2 class="sci-h2">Spulen Direkt-Wiegen</h2>
    <div class="muted">{{ spools|length }} Rolle(n) in der Liste</div>
  </div>
  <div class="table-wrap">
    <table class="sci-table spool-table-compact">
      <thead>
        <tr>
          <th>ID</th>
          <th>Rolle</th>
          <th>Lager</th>
          <th>Bestand</th>
          <th>Status</th>
          <th>Aktion</th>
        </tr>
      </thead>
      <tbody>
        {% for spool in spools %}
        {% set spool_label = (spool.brand ~ ' ' ~ spool.material ~ ' ' ~ spool.color_name)|trim %}
        <tr>
          <td>#{{ spool.id }}</td>
          <td>
            <strong>{{ spool.brand }}</strong>
            <div class="muted">{{ spool.material }} | {{ spool.color_name }}{% if spool.sku %} | {{ spool.sku }}{% endif %}</div>
          </td>
          <td>{{ spool.warehouse_name }}{% if spool.slot_number %}<div class="muted">Slot {{ spool.slot_number }}</div>{% endif %}</td>
          <td>
            {{ spool.remaining_g }} g
            <div class="muted">frei: {{ spool.available_g }} g / netto: {{ spool.net_weight_g }} g</div>
          </td>
          <td><span class="sci-badge {% if spool.stock_state == 'kritisch' %}critical{% elif spool.stock_state == 'niedrig' %}low{% elif spool.stock_state == 'ok' %}ok{% else %}archiviert{% endif %}">{{ spool.stock_state }}</span></td>
          <td>
            <button type="button" class="sci-btn subtle small" data-open-weigh-spool data-id="{{ spool.id }}" data-name="{{ spool_label }}">
              <iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon>
              Wiegen
            </button>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="empty-cell">Keine aktiven Spulen gefunden.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<section class="sci-panel section-gap">
  <div class="section-head compact">
    <h2 class="sci-h2">Wiegehistorie</h2>
    <div class="muted">Gespeichert als Bewegungs-Typ <code>WEIGH</code></div>
  </div>
  <form class="page-filter-form compact" method="get">
    <div class="page-filter-main">
      <input class="sci-input filter-search" name="history_q" placeholder="Suche in Grund, Spule, Hersteller" value="{{ history_filters.q }}">
      <input class="sci-input" type="number" min="1" step="1" name="history_spool_id" placeholder="Spulen-ID" value="{{ history_filters.spool_id }}">
    </div>
    <div class="page-filter-side">
      <input type="hidden" name="q" value="{{ filters.q }}">
      <input type="hidden" name="warehouse_id" value="{{ filters.warehouse_id }}">
      <input type="hidden" name="stock_state" value="{{ filters.stock_state }}">
      <button class="sci-btn small"><iconify-icon icon="mdi:history" aria-hidden="true"></iconify-icon> Historie filtern</button>
    </div>
  </form>
  <div class="table-wrap section-gap">
    <table class="sci-table">
      <thead>
        <tr>
          <th>Zeitpunkt</th>
          <th>Spule</th>
          <th>Lager</th>
          <th>Differenz</th>
          <th>Grund</th>
        </tr>
      </thead>
      <tbody>
        {% for row in weigh_history %}
        <tr>
          <td>{{ row.created_at }}</td>
          <td>
            <strong>#{{ row.spool_id }}</strong>
            <div class="muted">{{ row.brand }} | {{ row.material }} | {{ row.color_name }}</div>
          </td>
          <td>{{ row.from_name_display or '-' }}</td>
          <td>{{ row.quantity_g or 0 }} g</td>
          <td>{{ row.reason or '-' }}</td>
        </tr>
        {% else %}
        <tr><td colspan="5" class="empty-cell">Noch keine Wiegevorgaenge 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="scale-devices" type="application/json">{{ scales_json|tojson }}</script>
<script id="empty-spool-options" type="application/json">{{ empty_spool_profiles_json|tojson }}</script>
{% endblock %}