{% extends "base.html" %}
{% set active_page = "index" %}
{% block page_title %}Dashboard{% endblock %}
{% block page_sub %}<div class="topbar-sub">Kunden-/Ticket-Übersicht</div>{% endblock %}

{% block content %}

{% if tickets is none %}
<div class="card card-pad" style="max-width:560px; margin:40px auto; text-align:center;">
  <p class="text-faint" style="font-size:13px;">
    {% if not current_user.is_authenticated %}Bitte anmelden.{% else %}Keine Berechtigung, Lizenzen anzusehen.{% endif %}
  </p>
</div>
{% else %}

<div class="section-head">
  <div>
    <h2 style="font-size:16px;">Tickets</h2>
    <div class="hint">Jedes Ticket ist die dauerhafte Berechtigung eines Kunden auf eine Lizenz mit festen Eckdaten -- die eigentliche Lizenzdatei darunter ist austauschbar.</div>
  </div>
  {% if can_create %}
  <a href="{{ url_for('ticket_new') }}" class="btn btn-primary">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
    Neues Ticket
  </a>
  {% endif %}
</div>

<div class="table-wrap">
  <div class="table-toolbar">
    <div class="search-input">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
      <input type="text" id="ticketSearch" placeholder="Tickets durchsuchen…" oninput="filterTicketsTable()">
    </div>
  </div>
  <div style="overflow-x:auto;">
  <table class="data-table" id="ticketsTable" data-sortable>
    <thead><tr>
      <th data-sort-key="customer">Kunde</th>
      <th data-sort-key="type">Typ</th>
      <th>Module</th>
      <th data-sort-key="ticketstatus">Ticket</th>
      <th data-sort-key="expires">Lizenz-Ablauf</th>
      <th data-sort-key="status">Lizenz-Status</th>
      <th data-sort-key="heartbeat">Letzter Heartbeat</th>
      <th style="width:1%;">Aktionen</th>
    </tr></thead>
    {% for t in tickets %}
    <tbody data-sort-customer="{{ t.customer_name|lower }}" data-sort-type="{{ t.type }}"
           data-sort-ticketstatus="{{ t.status }}"
           data-sort-expires="{{ t.license.expires_at if t.license else '' }}"
           data-sort-status="{{ t.license.status if t.license else '' }}"
           data-sort-heartbeat="{{ t.license.last_heartbeat_at if t.license and t.license.last_heartbeat_at else '' }}">
      <tr>
        <td class="cell-name">{{ t.customer_name }}</td>
        <td>{{ type_labels.get(t.type, t.type) }}</td>
        <td class="text-dim">{{ t.modules_list|join(', ') if t.modules_list else '—' }}</td>
        <td><span class="pill {{ 'online' if t.status == 'open' else 'offline' }}">{{ 'Offen' if t.status == 'open' else 'Gesperrt' }}</span></td>
        {% if t.license %}
        <td class="text-dim">
          {{ t.license.expires_at[:10] }}
          {% if t.license.status == 'active' and t.license.days_left is not none %}
            {% if t.license.is_expired %}<span style="color:var(--danger);">(abgelaufen)</span>
            {% elif t.license.days_left <= 30 %}<span style="color:var(--warning);">({{ t.license.days_left }} Tage)</span>
            {% endif %}
          {% endif %}
        </td>
        <td>
          <span class="pill {{ {'active': 'online', 'issued': 'unknown', 'deactivated': 'disabled', 'revoked': 'offline'}.get(t.license.status, 'disabled') }}">
            {{ {"issued": "Ausgestellt", "active": "Aktiv", "deactivated": "Deaktiviert", "revoked": "Widerrufen"}.get(t.license.status, t.license.status) }}
          </span>
        </td>
        <td class="text-dim">{{ t.license.last_heartbeat_at or '—' }}</td>
        {% else %}
        <td class="text-dim">—</td>
        <td class="text-faint">Noch keine Lizenz</td>
        <td class="text-dim">—</td>
        {% endif %}
        <td>
          <div class="row-actions">
            <a class="icon-btn" title="Ticket-Details" href="{{ url_for('ticket_detail', ticket_id=t.id) }}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
    {% else %}
    <tbody data-sort-pinned>
      <tr class="empty-row"><td colspan="8">Noch keine Tickets angelegt.</td></tr>
    </tbody>
    {% endfor %}
  </table>
  </div>
</div>

{% endif %}
{% endblock %}

{% block scripts %}
<script>
function filterTicketsTable() {
    const el = document.getElementById("ticketSearch");
    if (!el) return;
    const q = el.value.trim().toLowerCase();
    document.querySelectorAll("#ticketsTable tbody").forEach(tbody => {
        if (tbody.hasAttribute("data-sort-pinned")) return;
        tbody.style.display = tbody.innerText.toLowerCase().includes(q) ? "" : "none";
    });
}
</script>
{% endblock %}