<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Licencias emitidas — ContaApp</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
    body { background:#0f1623; min-height:100vh; padding:32px 16px; font-family:'Segoe UI',system-ui,sans-serif; }
    .wrap { max-width:860px; margin:0 auto; }
    .lic-row {
      background:#0f2744; border:1px solid rgba(255,255,255,.07);
      border-radius:10px; padding:14px 18px; margin-bottom:8px;
      display:flex; align-items:center; gap:16px;
    }
    .lic-row:hover { border-color:rgba(79,134,247,.3); }
    .badge-plan {
      font-size:.68rem; font-weight:700; padding:3px 10px;
      border-radius:20px; white-space:nowrap; flex-shrink:0;
    }
    .badge-starter  { background:rgba(148,163,184,.15); color:#94a3b8; }
    .badge-pro      { background:rgba(79,134,247,.18);  color:#60a5fa; }
    .badge-lifetime { background:rgba(251,191,36,.15);  color:#fbbf24; }
    .badge-vigente  { background:rgba(74,222,128,.12);  color:#4ade80; font-size:.65rem; padding:2px 8px; border-radius:20px; }
    .badge-expirada { background:rgba(248,113,113,.12); color:#f87171; font-size:.65rem; padding:2px 8px; border-radius:20px; }
    .holder { color:#f1f5f9; font-weight:600; font-size:.9rem; }
    .email  { color:#60a5fa; font-size:.8rem; }
    .meta   { color:#475569; font-size:.75rem; margin-top:2px; }
    .expiry { color:#94a3b8; font-size:.8rem; white-space:nowrap; text-align:right; flex-shrink:0; }
    .empty  { text-align:center; color:#475569; padding:60px 0; }
  </style>
</head>
<body>
<div class="wrap">

  <!-- Cabecera -->
  <div class="d-flex align-items-center justify-content-between mb-4">
    <div class="d-flex align-items-center gap-3">
      <div style="background:#4f86f7;border-radius:10px;width:42px;height:42px;display:flex;align-items:center;justify-content:center">
        <i class="bi bi-clock-history" style="font-size:1.2rem;color:#fff"></i>
      </div>
      <div>
        <div style="color:#f8fafc;font-size:1.05rem;font-weight:700">Licencias emitidas</div>
        <div style="color:#64748b;font-size:.78rem">{{ licencias|length }} licencia(s) generada(s)</div>
      </div>
    </div>
    <div class="d-flex gap-2">
      <a href="{{ url_for('soporte.generar_licencia') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-circle me-1"></i>Nueva licencia
      </a>
      <a href="{{ url_for('soporte.empresas') }}" class="btn btn-outline-secondary btn-sm">
        Volver
      </a>
    </div>
  </div>

  {% if licencias %}
  {% for lic in licencias %}
  {% set expirada = lic.expiry < hoy %}
  <div class="lic-row">

    <!-- Plan -->
    <span class="badge-plan badge-{{ lic.plan }}">
      {{ 'STARTER' if lic.plan == 'starter' else ('PRO' if lic.plan == 'pro' else 'VITALICIO') }}
    </span>

    <!-- Info -->
    <div class="flex-grow-1 min-width-0">
      <div class="holder">{{ lic.holder }}</div>
      <div class="email"><i class="bi bi-envelope me-1" style="font-size:.7rem"></i>{{ lic.email }}</div>
      <div class="meta">Emitida: {{ lic.issued }} &nbsp;·&nbsp; Generada: {{ lic.fecha[:10] }}</div>
    </div>

    <!-- Estado + expiración -->
    <div class="expiry">
      <div class="mb-1 text-end">
        {% if expirada %}
        <span class="badge-expirada"><i class="bi bi-x-circle me-1"></i>Expirada</span>
        {% else %}
        <span class="badge-vigente"><i class="bi bi-check-circle me-1"></i>Vigente</span>
        {% endif %}
      </div>
      <div>Expira: {{ lic.expiry if lic.expiry < '2090-01-01' else '—' }}</div>
    </div>

  </div>
  {% endfor %}

  {% else %}
  <div class="empty">
    <i class="bi bi-key" style="font-size:2.5rem;opacity:.2;display:block;margin-bottom:12px"></i>
    Aún no has generado ninguna licencia.<br>
    <a href="{{ url_for('soporte.generar_licencia') }}" style="color:#60a5fa;font-size:.85rem">
      Genera la primera
    </a>
  </div>
  {% endif %}

</div>
</body>
</html>
