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

{% block content %}

{% if buckets 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;">Aktive Lizenzen</h2>
    <div class="hint">
      Rein informative Übersicht nach Restlaufzeit der Ablauffristen (grün &gt; 90 Tage, orange 30-90 Tage, rot &lt; 30 Tage). Tickets anlegen, bearbeiten oder Lizenzen ausstellen/widerrufen geschieht unter <a href="{{ url_for('tickets_list') }}" style="color:var(--accent-strong); font-weight:600;">Tickets</a>.
    </div>
  </div>
</div>

<div class="stat-row">
  <div class="stat-card">
    <div class="stat-label">Rot (&lt; 30 Tage)</div>
    <div class="stat-value offline">{{ stats.red }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Orange (30-90 Tage)</div>
    <div class="stat-value" style="color:var(--warning);">{{ stats.orange }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Grün (&gt; 90 Tage / Lifetime)</div>
    <div class="stat-value online">{{ stats.green }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Aktiv gesamt</div>
    <div class="stat-value">{{ stats.total }}</div>
  </div>
</div>

{% macro license_tile(l) %}
{% set ds = {'red': 'offline', 'orange': 'unbekannt', 'green': 'online'}[l.color] %}
<div class="device-card is-readonly" data-status="{{ ds }}">
  <div class="dc-top">
    <div class="dc-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="16" r="1.5"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
    </div>
    <span class="pill {{ {'red': 'offline', 'orange': 'unknown', 'green': 'online'}[l.color] }}">
      {% if l.is_lifetime %}Lifetime{% elif l.is_expired %}Abgelaufen{% else %}{{ l.days_left }} Tage{% endif %}
    </span>
  </div>
  <div class="dc-name">{{ l.customer_name }}</div>
  <div class="dc-ip">{{ l.hostname or 'Hostname unbekannt' }}</div>
  <div class="text-faint" style="font-size:11px; margin-top:2px;">{{ type_labels.get(l.type, l.type) }}</div>
</div>
{% endmacro %}

{% macro section_chevron() %}<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>{% endmacro %}

{% if stats.total %}

  {% if buckets.red %}
  <div class="dash-section" data-status="red">
    <div class="dash-section-title">{{ section_chevron() }}Rot <span class="pill offline">{{ buckets.red|length }}</span></div>
    <div class="device-grid">
      {% for l in buckets.red %}{{ license_tile(l) }}{% endfor %}
    </div>
  </div>
  {% endif %}

  {% if buckets.orange %}
  <div class="dash-section" data-status="orange">
    <div class="dash-section-title">{{ section_chevron() }}Orange <span class="pill unknown">{{ buckets.orange|length }}</span></div>
    <div class="device-grid">
      {% for l in buckets.orange %}{{ license_tile(l) }}{% endfor %}
    </div>
  </div>
  {% endif %}

  {% if buckets.green %}
  <div class="dash-section" data-status="green">
    <div class="dash-section-title">{{ section_chevron() }}Grün <span class="pill online">{{ buckets.green|length }}</span></div>
    <div class="device-grid">
      {% for l in buckets.green %}{{ license_tile(l) }}{% endfor %}
    </div>
  </div>
  {% endif %}

{% else %}
<div class="card card-pad" style="text-align:center; color:var(--text-faint);">
  Aktuell keine aktivierte Lizenz. Neue Tickets/Lizenzen unter <a href="{{ url_for('tickets_list') }}" style="color:var(--accent-strong); font-weight:600;">Tickets</a> anlegen.
</div>
{% endif %}

{% endif %}
{% endblock %}

{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", () => {
    const collapsed = new Set();
    function apply() {
        document.querySelectorAll(".dash-section").forEach(section => {
            section.classList.toggle("collapsed", collapsed.has(section.dataset.status));
        });
    }
    document.querySelectorAll(".dash-section-title").forEach(title => {
        title.addEventListener("click", function () {
            const key = this.closest(".dash-section").dataset.status;
            if (collapsed.has(key)) collapsed.delete(key); else collapsed.add(key);
            apply();
        });
    });
});
</script>
{% endblock %}