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

{% block title %}Listado de Capacitaciones{% endblock title %}

{% block content %}
<div class="container mt-4">
  <div class="card">
    <!-- Encabezado con título y botón para agregar capacitación -->
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
      <h3 class="card-title mb-2 mb-md-0">Listado de Capacitaciones</h3>
      <a href="{% url 'registrar_capacitacion' %}" class="btn btn-success">
        <i class="fas fa-plus"></i> Agregar Capacitación
      </a>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="tabla_capacitaciones" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <tr>
              <th>ID</th>
              <th>Nombre</th>
              <th>Fecha</th>
              <th>Lugar</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {% for cap in capacitaciones %}
            <tr>
              <td>{{ cap.id }}</td>
              <td>{{ cap.nombre }}</td>
              <td>{{ cap.fecha }}</td>
              <td>{{ cap.lugar }}</td>
              <td>
                <a href="{% url 'listar_asistencias' cap.id %}" class="btn btn-sm btn-info">
                  <i class="fas fa-eye"></i> Ver Asistencias
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<script>
$(document).ready(function(){
  $('#tabla_capacitaciones').DataTable({
    responsive: true
  });
});
</script>
{% endblock scripts %}