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

{% block content %}

{% if licenses 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;">Lizenzen</h2>
  </div>
  {% if can_create %}
  <a href="{{ url_for('license_issue') }}" 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>
    Neue Lizenz ausstellen
  </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="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 data-sort-key="type">Typ</th>
      <th>Module</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-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>{{ type_labels.get(l.type, l.type) }}</td>
        <td class="text-dim">{{ l.modules_list|join(', ') if l.modules_list else '—' }}</td>
        <td class="text-dim">
          {{ l.expires_at[:10] }}
          {% if l.status == 'active' and l.days_left is not none %}
            {% if l.is_expired %}<span style="color:var(--danger);">(abgelaufen)</span>
            {% elif l.days_left <= 30 %}<span style="color:var(--warning);">({{ l.days_left }} Tage)</span>
            {% 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>
          </div>
        </td>
      </tr>
    </tbody>
    {% else %}
    <tbody data-sort-pinned>
      <tr class="empty-row"><td colspan="7">Noch keine Lizenzen ausgestellt.</td></tr>
    </tbody>
    {% endfor %}
  </table>
  </div>
</div>

{% endif %}
{% endblock %}

{% block scripts %}
<script>
function filterLicensesTable() {
    const el = document.getElementById("licenseSearch");
    if (!el) return;
    const q = el.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 %}