{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
  <h2 class="fw-bold mb-0"><i class="bi bi-speedometer2 text-primary"></i> Dashboard</h2>
  <span class="ms-3 text-muted">Resumen del sistema de control de cambios</span>
</div>

<!-- Tarjetas de métricas -->
<div class="row g-4 mb-5">
  <div class="col-sm-4">
    <div class="card border-0 shadow-sm h-100 border-start border-4 border-warning">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-warning bg-opacity-15 p-3">
          <i class="bi bi-hourglass-split fs-2 text-warning"></i>
        </div>
        <div>
          <div class="fs-1 fw-bold text-warning">{{ solicitados }}</div>
          <div class="text-muted fw-semibold">Solicitados</div>
          <a href="{{ url_for('cambios.aplicacion_lista') }}" class="small text-decoration-none">
            Ver pendientes →
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card border-0 shadow-sm h-100 border-start border-4 border-primary">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-primary bg-opacity-10 p-3">
          <i class="bi bi-gear-fill fs-2 text-primary"></i>
        </div>
        <div>
          <div class="fs-1 fw-bold text-primary">{{ programados }}</div>
          <div class="text-muted fw-semibold">En Proceso</div>
          <a href="{{ url_for('cambios.liberacion_lista') }}" class="small text-decoration-none">
            Ver programados →
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="card border-0 shadow-sm h-100 border-start border-4 border-success">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-success bg-opacity-10 p-3">
          <i class="bi bi-check-circle-fill fs-2 text-success"></i>
        </div>
        <div>
          <div class="fs-1 fw-bold text-success">{{ liberados }}</div>
          <div class="text-muted fw-semibold">Liberados</div>
          <a href="{{ url_for('cambios.lista') }}" class="small text-decoration-none">
            Ver historial →
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Accesos rápidos -->
<h5 class="fw-bold mb-3 text-muted text-uppercase" style="font-size:.8rem; letter-spacing:.1em;">
  Accesos rápidos
</h5>
<div class="row g-3">

  {% if current_user.rol.nombre in ['Promotor','Administrador'] %}
  <div class="col-6 col-md-3">
    <a href="{{ url_for('cambios.alta') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-plus-circle fs-2 text-success mb-2 d-block"></i>
        <div class="fw-semibold">Alta de Cambio</div>
      </div>
    </a>
  </div>
  {% endif %}

  {% if current_user.rol.nombre in ['Desarrollador','Administrador'] %}
  <div class="col-6 col-md-3">
    <a href="{{ url_for('cambios.aplicacion_lista') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-gear fs-2 text-primary mb-2 d-block"></i>
        <div class="fw-semibold">Aplicación de Cambio</div>
      </div>
    </a>
  </div>
  {% endif %}

  {% if current_user.rol.nombre == 'Administrador' %}
  <div class="col-6 col-md-3">
    <a href="{{ url_for('cambios.liberacion_lista') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-rocket fs-2 text-warning mb-2 d-block"></i>
        <div class="fw-semibold">Liberar a Producción</div>
      </div>
    </a>
  </div>
  {% endif %}

  <div class="col-6 col-md-3">
    <a href="{{ url_for('reportes.index') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-file-earmark-pdf fs-2 text-danger mb-2 d-block"></i>
        <div class="fw-semibold">Reportes PDF</div>
      </div>
    </a>
  </div>

  {% if current_user.rol.nombre == 'Administrador' %}
  <div class="col-6 col-md-3">
    <a href="{{ url_for('sistemas.lista') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-hdd-network fs-2 text-secondary mb-2 d-block"></i>
        <div class="fw-semibold">Sistemas</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-md-3">
    <a href="{{ url_for('relacion.lista') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-diagram-3 fs-2 text-info mb-2 d-block"></i>
        <div class="fw-semibold">Relación Usuario-Sistema</div>
      </div>
    </a>
  </div>
  <div class="col-6 col-md-3">
    <a href="{{ url_for('usuarios.lista') }}"
       class="card text-center text-decoration-none border-0 shadow-sm h-100 hover-lift">
      <div class="card-body py-4">
        <i class="bi bi-people fs-2 text-dark mb-2 d-block"></i>
        <div class="fw-semibold">Usuarios</div>
      </div>
    </a>
  </div>
  {% endif %}

</div>
{% endblock %}