{% extends "base.html" %}
{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <h3 class="fw-bold text-dark">Administración — Suscripciones</h3>
  <a class="btn btn-success d-flex align-items-center gap-1" href="/admin/subs/new">
    <i class="bi bi-plus-circle"></i> Nueva suscripción
  </a>
</div>

<!-- 🔎 Barra de búsqueda -->
<form method="get" action="/admin" class="mb-4 d-flex gap-2">
  <input type="text" name="q" value="{{ request.query_params.get('q', '') }}" 
         class="form-control shadow-sm" placeholder="Buscar por número de celular...">
  <button type="submit" class="btn btn-primary px-4">Buscar</button>
</form>

<!-- 🧾 Tarjetas -->
<div class="row">
  {% for i in items %}
  {% set u = i.sub %}
  <div class="col-md-6 col-lg-4 mb-4">
    <div class="card shadow-sm border-0 h-100">
      <div class="card-body">
        <h5 class="fw-bold text-primary mb-2">
          {{ u.account_type }}
        </h5>
        <span class="badge bg-{{ i.color }} px-3 py-2 mb-2">{{ i.estado }}</span>
        <p class="mb-1"><strong>📧 Correo:</strong> {{ u.email }}</p>
        <p class="mb-1"><strong>🔑 Contraseña:</strong> {{ u.pw_note }}</p>
        <p class="mb-1"><strong>👤 Perfil:</strong> {{ u.profile }}</p>
        <p class="mb-1"><strong>🔐 PIN:</strong> {{ u.pin or "-" }}</p>
        <p class="mb-1"><strong>📅 Vence:</strong> {{ u.expiry_date or "-" }}</p>
        <p class="mb-2"><strong>📱 Celular:</strong> {{ u.phone or "-" }}</p>
        <hr>
        <div class="d-flex justify-content-between">
          <a href="/admin/subs/{{ u.id }}/edit" class="btn btn-outline-primary btn-sm d-flex align-items-center gap-1">
            <i class="bi bi-pencil-square"></i> Editar
          </a>
          <a href="{{ i.wa_url }}" target="_blank" class="btn btn-success btn-sm d-flex align-items-center gap-1">
            <i class="bi bi-whatsapp"></i> WhatsApp
          </a>
        </div>

        <!-- 🔔 Botones dinámicos de estado -->
        {% if i.estado == "Por vencer" %}
          <a href="{{ i.wa_url }}" target="_blank"
            class="btn btn-warning btn-sm d-flex align-items-center gap-1 mt-2">
            <i class="bi bi-bell"></i> Notificar por vencer
          </a>
        {% elif i.estado == "Vencido" %}
          <a href="{{ i.wa_url }}" target="_blank"
            class="btn btn-danger btn-sm d-flex align-items-center gap-1 mt-2">
            <i class="bi bi-exclamation-triangle"></i> Avisar vencido
          </a>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<style>
  body {
    background-color: #f8fafc;
  }

  h3 {
    font-weight: 700;
  }

  .card {
    transition: all 0.2s ease-in-out;
    border-radius: 12px;
  }

  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  }

  .card-body {
    font-size: 0.95rem;
  }

  strong {
    color: #2a2a2a;
  }

  .btn {
    border-radius: 8px;
  }

  form input {
    border-radius: 8px;
  }
</style>

{% endblock %}