{% extends "base.html" %}
{% set active_page = "licenses" %}
{% block page_title %}Lizenzen{% endblock %}
{% block page_sub %}<div class="topbar-sub">Alle ausgestellten Lizenzen{% if filter_customer %} -- {{ filter_customer.name }}{% elif filter_ticket %} -- Ticket{% endif %}</div>{% endblock %}

{% block content %}

<div class="section-head">
  <div>
    <h2 style="font-size:16px;">Lizenzen</h2>
    <div class="hint">
      Jede Zeile ist eine konkrete, signierte Lizenzdatei -- ausgestellt aus einem Ticket (siehe <a href="{{ url_for('tickets_list') }}" style="color:var(--accent-strong); font-weight:600;">Tickets</a>). Herunterladen, per E-Mail versenden oder widerrufen geschieht auf der Detailseite.
    </div>
  </div>
</div>

{% if filter_ticket or filter_customer %}
<div class="notice-banner" style="margin-bottom:14px;">
  Gefiltert nach {% if filter_customer %}Kunde „{{ filter_customer.name }}“{% endif %}{% if filter_ticket %}Ticket{% endif %} --
  <a href="{{ url_for('licenses_list') }}">Filter entfernen</a>
</div>
{% endif %}

<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="licenseSearch" placeholder="Lizenzen durchsuchen…" oninput="filterLicensesTable()">
    </div>
  </div>
  <div style="overflow-x:auto;">
  <table class="data-table" id="licensesTable" data-sortable>
    <thead><tr>
      <th data-sort-key="customer">Kunde</th>
      <th>Lizenz-ID</th>
      <th data-sort-key="type">Typ</th>
      <th data-sort-key="issued">Ausgestellt</th>
      <th data-sort-key="expires">Ablauf</th>
      <th data-sort-key="status">Status</th>
      <th data-sort-key="heartbeat">Letzter Heartbeat</th>
      <th style="width:1%;">Aktionen</th>
    </tr></thead>
    {% for l in licenses %}
    <tbody data-sort-customer="{{ l.customer_name|lower }}" data-sort-type="{{ l.type }}"
           data-sort-issued="{{ l.issued_at }}" data-sort-expires="{{ l.expires_at }}"
           data-sort-status="{{ l.status }}" data-sort-heartbeat="{{ l.last_heartbeat_at or '' }}">
      <tr>
        <td class="cell-name">{{ l.customer_name }}</td>
        <td class="mono text-dim">{{ l.license_id[:8] }}…</td>
        <td>{{ type_labels.get(l.type, l.type) }}</td>
        <td class="text-dim">{{ l.issued_at[:10] }}</td>
        <td class="text-dim">
          {% if l.is_lifetime %}Lifetime
          {% else %}
            {{ l.expires_at[:10] }}
            {% if l.status == 'active' %}
              {% if l.is_expired %}<span style="color:var(--danger);">(abgelaufen)</span>
              {% elif l.color in ('red', 'orange') %}<span style="color:{{ 'var(--danger)' if l.color == 'red' else 'var(--warning)' }};">({{ l.days_left }} Tage)</span>
              {% endif %}
            {% endif %}
          {% endif %}
        </td>
        <td>
          <span class="pill {{ {'active': 'online', 'issued': 'unknown', 'deactivated': 'disabled', 'revoked': 'offline'}.get(l.status, 'disabled') }}">
            {{ {"issued": "Ausgestellt", "active": "Aktiv", "deactivated": "Deaktiviert", "revoked": "Widerrufen"}.get(l.status, l.status) }}
          </span>
        </td>
        <td class="text-dim">{{ l.last_heartbeat_at or '—' }}</td>
        <td>
          <div class="row-actions">
            <a class="icon-btn" title="Details" href="{{ url_for('license_detail', license_id=l.license_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>
            {% if can_edit %}
            <a class="icon-btn" title="Herunterladen" href="{{ url_for('license_download', license_id=l.license_id) }}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
            </a>
            {% if l.status not in ('revoked',) %}
            <form method="post" action="{{ url_for('license_revoke', license_id=l.license_id) }}"
                  data-confirm="Lizenz wirklich widerrufen?">
              <button type="submit" class="icon-btn" title="Widerrufen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>
              </button>
            </form>
            {% endif %}
            {% if l.status in ('revoked', 'issued') %}
            <form method="post" action="{{ url_for('license_delete', license_id=l.license_id) }}"
                  data-confirm="Lizenz wirklich löschen? Das zugehörige Ticket bleibt bestehen.">
              <button type="submit" class="icon-btn" style="color:var(--danger);" title="Löschen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
              </button>
            </form>
            {% endif %}
            {% endif %}
          </div>
        </td>
      </tr>
    </tbody>
    {% else %}
    <tbody data-sort-pinned>
      <tr class="empty-row"><td colspan="8">Noch keine Lizenz ausgestellt.</td></tr>
    </tbody>
    {% endfor %}
  </table>
  </div>
</div>

{% endblock %}

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