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

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

{% block content %}
<div class="container mt-4">
  <div class="card">
    <!-- Encabezado con título y botón para volver al listado de capacitaciones -->
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
      <h3 class="card-title">Asistencias - Capacitación: {{ capacitacion.nombre }}</h3>
      <a href="{% url 'listar_capacitaciones' %}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Volver a Capacitaciones
      </a>
      <a href="{% url 'registrar_asistencia' %}?capacitacion_id={{ capacitacion.id }}" class="btn btn-success">
        <i class="fas fa-plus"></i> Crear Asistencia
      </a>
    </div>
    <div class="card-body">
      <div class="table-responsive">
        <table id="tabla_asistencias" class="table table-bordered table-striped dt-responsive nowrap">
          <thead>
            <tr>
              <th>ID</th>
              <th>Nombre Miembro</th>
              <th>DNI</th>
              <th>Estado Asistencia</th>
              <th>Entrega Manual</th>
              <th>Duración</th>
              <th>Observaciones</th>
            </tr>
          </thead>
          <tbody>
            {% for a in asistencias %}
            <tr>
              <td>{{ a.id }}</td>
              <td>{{ a.nombre_miembro }}</td>
              <td>{{ a.dni }}</td>
              <td>{{ a.estado_asistencia }}</td>
              <td>{% if a.entrega_manual %}Sí{% else %}No{% endif %}</td>
              <td>{{ a.duracion }}</td>
              <td>{{ a.observaciones }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

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