{% extends "base.html" %}
{% from "_macros.html" import change_row %}
{% block title %}Übersicht · EPI-Support{% endblock %}
{% block content %}

<section class="cards">
  <div class="card"><span class="num">{{ stats.total }}</span><span class="lbl">Tickets gesamt</span></div>
  <div class="card"><span class="num">{{ stats.open }}</span><span class="lbl">offen</span></div>
  <div class="card {{ 'alert' if stats.unseen else '' }}">
    <span class="num">{{ stats.unseen }}</span><span class="lbl">ungelesene Änderungen</span>
  </div>
  <div class="card status">
    {% if last_run %}
      <span class="num {{ 'ok' if last_run.status == 'ok' else 'err' }}">
        {{ '✓' if last_run.status == 'ok' else '!' }}
      </span>
      <span class="lbl">letzter Abruf<br>{{ last_run.finished_at|dt }}</span>
    {% else %}
      <span class="num">…</span><span class="lbl">startet</span>
    {% endif %}
  </div>
</section>

<div class="grid">
  <section class="panel">
    <div class="panel-head">
      <h2>Ungelesene Änderungen{% if stats.unseen %} ({{ stats.unseen }}){% endif %}</h2>
      {% if stats.unseen %}
      <form method="post" action="{{ url_for('mark_read') }}">
        <button class="btn-sm" type="submit">alle als gelesen</button>
      </form>
      {% endif %}
    </div>
    {% if recent %}
      <ul class="feed compact">
        {% for c in recent %}{{ change_row(c) }}{% endfor %}
      </ul>
      {% if stats.unseen > recent|length %}
        <a class="more" href="{{ url_for('changes', show='unseen') }}">
          + {{ stats.unseen - recent|length }} weitere ungelesene anzeigen →</a>
      {% endif %}
    {% else %}
      <p class="muted">Alles gelesen – keine offenen Änderungen. 🎉</p>
    {% endif %}
  </section>

  <section class="panel">
    <div class="panel-head"><h2>Status-Filter</h2></div>
    <div class="chips">
      <a class="chip {{ 'on' if not active_state }}" href="{{ url_for('index', sort=sort, dir=dir) }}">alle</a>
      <a class="chip {{ 'on' if active_state == 'not_closed' }}"
         href="{{ url_for('index', state='not_closed', sort=sort, dir=dir) }}">nicht geschlossen</a>
      {% for s in states %}
        <a class="chip {{ 'on' if active_state == s.state }}"
           href="{{ url_for('index', state=s.state, sort=sort, dir=dir) }}">{{ s.state }} ({{ s.c }})</a>
      {% endfor %}
    </div>
  </section>
</div>

{% macro th(col, label) %}
  {% set nextdir = 'asc' if (sort == col and dir == 'desc') else 'desc' %}
  <th class="{{ 'sorted' if sort == col }}">
    <a href="{{ url_for('index', state=active_state or none, sort=col, dir=nextdir) }}">
      {{ label }}{% if sort == col %} <span class="arrow">{{ '▼' if dir == 'desc' else '▲' }}</span>{% endif %}
    </a>
  </th>
{% endmacro %}

<section class="panel">
  <div class="panel-head">
    <h2>Tickets{% if active_state == 'not_closed' %} – nicht geschlossen{% elif active_state %} – {{ active_state }}{% endif %}</h2>
  </div>
  <table class="tickets">
    <thead>
      <tr>
        {{ th('number', '#') }}{{ th('title', 'Titel') }}{{ th('state', 'Status') }}
        {{ th('priority', 'Priorität') }}{{ th('owner', 'Bearbeiter') }}
        {{ th('articles', 'Artikel') }}{{ th('updated', 'zuletzt geändert') }}
      </tr>
    </thead>
    <tbody>
      {% for t in tickets %}
        {% set n = unseen_map.get(t.id) %}
        <tr class="{{ 'row-unseen' if n }}">
          <td>
            {% if n %}<span class="badge" title="{{ n }} unbestätigte Änderung(en)">{{ n }}</span>{% endif %}
            <a href="{{ url_for('ticket_detail', ticket_id=t.id) }}">{{ t.number }}</a>
          </td>
          <td class="title">{{ t.title }}</td>
          <td><span class="state state-{{ t.state }}">{{ t.state }}</span></td>
          <td>{{ t.priority }}</td>
          <td>{{ t.owner if t.owner and t.owner != '-' else '—' }}</td>
          <td>{{ t.article_count }}</td>
          <td><time>{{ t.zammad_updated_at|dt }}</time></td>
        </tr>
      {% else %}
        <tr><td colspan="7" class="muted">Keine Tickets.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endblock %}