{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h3 class="mb-3">Nueva suscripción</h3>

        <form method="post" action="/admin/subs/new">
          <div class="mb-3">
            <label class="form-label">Cuenta</label>
            <select name="account_type" class="form-select" required>
              {% for t in account_types %}
                <option value="{{ t }}">{{ t }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="mb-3">
            <label class="form-label">Correo</label>
            <input name="email" type="email" class="form-control" placeholder="usuario@tuki.loonixx.com" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Contraseña (para login)</label>
            <input name="password" type="text" class="form-control" placeholder="Clave del usuario" required>
            <div class="form-text">Se guardará cifrada para el login.</div>
          </div>

          <div class="mb-3">
            <label class="form-label">Perfil</label>
            <input name="profile" type="number" value="1" min="1" class="form-control" required>
          </div>

          <div class="mb-3">
            <label class="form-label">PIN</label>
            <input name="pin" type="text" class="form-control" placeholder="2345">
          </div>

          <div class="mb-3">
            <label class="form-label">Fecha de caducidad</label>
            <input name="expiry" type="date" class="form-control">
          </div>

          <div class="mb-3">
            <label class="form-label">Celular (WhatsApp)</label>
            <input name="phone" type="text" class="form-control" placeholder="51 9xxxxxxxx">
            <div class="form-text">Incluye el código de país. Ej.: Perú 51 + número.</div>
          </div>

          <button class="btn btn-success w-100">Guardar suscripción</button>
        </form>

      </div>
    </div>
  </div>
</div>
{% endblock %}