{% extends "base.html" %}
{% block title %}Mi perfil{% endblock %}
{% block page_title %}Mi perfil{% endblock %}

{% block content %}
<div class="row g-4 justify-content-center">
  <div class="col-lg-5">

    <!-- Tarjeta de identidad -->
    <div class="card border-0 shadow-sm mb-4">
      <div class="card-body text-center py-4">
        <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white mx-auto mb-3"
             style="width:72px;height:72px;font-size:1.6rem;
             background:{% if user.rol=='admin' %}linear-gradient(135deg,#ef4444,#dc2626)
             {% elif user.rol=='contable' %}linear-gradient(135deg,#3b82f6,#2563eb)
             {% else %}linear-gradient(135deg,#64748b,#475569){% endif %}">
          {{ user.username[0].upper() }}
        </div>
        <h5 class="mb-1 fw-bold">{{ user.username }}</h5>
        <span class="badge {{ roles_badge[user.rol] }} px-3 py-1 mb-2">
          {{ roles_labels[user.rol] }}
        </span>
        <div class="text-muted small">{{ session.get('empresa_nombre','—') }}</div>
        <div class="text-muted" style="font-size:.75rem">
          Cuenta creada el {{ user.created_at[:10] if user.created_at else '—' }}
        </div>
      </div>
    </div>

    <!-- Permisos del rol -->
    <div class="card border-0 shadow-sm mb-4">
      <div class="card-header border-0" style="background:linear-gradient(135deg,#f8fafc,#f1f5f9)">
        <i class="bi bi-shield-check me-2 text-muted"></i>
        <span class="fw-semibold text-muted">Permisos de tu rol</span>
      </div>
      <div class="card-body" style="font-size:.875rem">
        {% if user.rol == 'admin' %}
        <ul class="mb-0 ps-3">
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Acceso completo de lectura y escritura</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Gestión de usuarios del equipo</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Configuración de la empresa</li>
          <li><i class="bi bi-check2 text-success me-1"></i>Copias de seguridad</li>
        </ul>
        {% elif user.rol == 'contable' %}
        <ul class="mb-0 ps-3">
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Lectura y escritura de facturas y contabilidad</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Gestión de clientes y proveedores</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Informes y análisis</li>
          <li><i class="bi bi-x text-danger me-1"></i>Gestión de usuarios (solo administradores)</li>
        </ul>
        {% else %}
        <ul class="mb-0 ps-3">
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Consulta de facturas, clientes y contabilidad</li>
          <li class="mb-1"><i class="bi bi-check2 text-success me-1"></i>Visualización de informes</li>
          <li class="mb-1"><i class="bi bi-x text-danger me-1"></i>No puede crear ni modificar datos</li>
          <li><i class="bi bi-x text-danger me-1"></i>No puede gestionar usuarios</li>
        </ul>
        {% endif %}
      </div>
    </div>

    <!-- Cambiar contraseña -->
    <div class="card border-0 shadow-sm">
      <div class="card-header border-0" style="background:linear-gradient(135deg,#eef3ff,#e0e7ff)">
        <i class="bi bi-key me-2 text-primary"></i>
        <span class="fw-semibold text-primary">Cambiar contraseña</span>
      </div>
      <div class="card-body">
        {% if error %}
        <div class="alert alert-danger py-2 mb-3" style="font-size:.85rem">{{ error }}</div>
        {% endif %}
        <form method="post">
          <div class="mb-3">
            <label class="form-label">Contraseña actual</label>
            <input type="password" name="password_actual" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Nueva contraseña</label>
            <input type="password" name="password_nueva" class="form-control"
                   placeholder="Mín. 6 caracteres" required>
          </div>
          <div class="mb-4">
            <label class="form-label">Confirmar nueva contraseña</label>
            <input type="password" name="password_confirm" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-check2 me-1"></i>Actualizar contraseña
          </button>
        </form>
      </div>
    </div>

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