{% extends 'base.html' %}
{% load static %}

{% block title %}
  Panel Principal
{% endblock title %}

{% block content %}
<div class="container mt-4">
  <div class="row">
    
    <!-- VOLUNTARIOS -->
    <div class="col-lg-4 col-md-6 mb-4">
      <a href="{% url 'listar_personas' %}" class="text-decoration-none">
        <div class="card btn btn-outline-primary shadow-sm h-100">
          <div class="card-body d-flex flex-column justify-content-center text-center">
            <i class="fas fa-users fa-3x mb-3"></i>
            <h5 class="card-title">Voluntarios</h5>
            <p class="card-text">Gestiona los voluntarios registrados en el sistema.</p>
          </div>
        </div>
      </a>
    </div>
    
    <!-- CAPACITACIONES -->
    <div class="col-lg-4 col-md-6 mb-4">
      <a href="{% url 'listar_capacitaciones' %}" class="text-decoration-none">
        <div class="card btn btn-outline-warning shadow-sm h-100">
          <div class="card-body d-flex flex-column justify-content-center text-center">
            <i class="fas fa-book-open fa-3x mb-3"></i>
            <h5 class="card-title">Capacitaciones</h5>
            <p class="card-text">Registro y gestión de capacitaciones realizadas.</p>
          </div>
        </div>
      </a>
    </div>
    
    
    <!-- CENTROS DE VOTACIÓN -->
    <div class="col-lg-4 col-md-6 mb-4">
      <a href="{% url 'listar_centros' %}" class="text-decoration-none">
        <div class="card btn btn-outline-info shadow-sm h-100">
          <div class="card-body d-flex flex-column justify-content-center text-center">
            <i class="fas fa-map-marker-alt fa-3x mb-3"></i>
            <h5 class="card-title">Centros de Votación</h5>
            <p class="card-text">Administración de los centros de votación.</p>
          </div>
        </div>
      </a>
    </div>

    <!-- JRV -->
    <div class="col-lg-4 col-md-6 mb-4">
      <a href="{% url 'listar_jrv' %}" class="text-decoration-none">
        <div class="card btn btn-outline-success shadow-sm h-100">
          <div class="card-body d-flex flex-column justify-content-center text-center">
            <i class="fas fa-id-card-alt fa-3x mb-3"></i>
            <h5 class="card-title">JRV</h5>
            <p class="card-text">Gestión de Juntas Receptoras de Votos.</p>
          </div>
        </div>
      </a>
    </div>
    
  </div>
</div>
{% endblock content %}