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

{% block title %} Alumnos inscritos al curso {% endblock title %}
{% block contenido %}
{% include 'message.html' %}
<li class="text-dark me-4 ms-3 m-0 d-flex" >
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-badge-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M13 7h-6l4 5l-4 5h6l4 -5z"></path>
    </svg>
    <h3>Total de alumnos inscritos  : {{ contador_inscripcion }} </h3>
</li>
<div class="card p-0">
    <form id="csrf-form">
        {% csrf_token %}
    </form>
    <div class="table-responsive">
        <table class="table table-vcenter card-table">
            <thead>
                <tr>
                    <th>Usuarios</th>
                    <th>Nombre</th>
                    <th>Apellidos</th>
                    <th>Profesión</th>
                    <th>Correo electrónico</th>
                    <th class="w-1">Opciones</th>
                    <th class="w-1"></th>
                </tr>
            </thead>
            <tbody>
                {% for curso_inscripcion in pagination %}
                <tr>
                    <td class="text-muted">{{ curso_inscripcion.estudiante.username }}</td>
                    <td>{{ curso_inscripcion.estudiante.first_name }}</td>
                    <td>{{ curso_inscripcion.estudiante.last_name }}</td>
                    <td>{{ curso_inscripcion.estudiante.profession }}</td>
                    <td>{{ curso_inscripcion.estudiante.email }}</td>
                    <td>
                        <a data-bs-toggle="modal" data-bs-target="#eliminarModal{{ curso_inscripcion.estudiante.id }}" class="btn btn-outline-danger w-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M3 3l18 18"></path>
                                <path d="M4 7h3m4 0h9"></path>
                                <path d="M10 11l0 6"></path>
                                <path d="M14 14l0 3"></path>
                                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l.077 -.923"></path>
                                <path d="M18.384 14.373l.616 -7.373"></path>
                                <path d="M9 5v-1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                            </svg>Eliminar suscripción
                        </a>
                    </td>
                </tr>

                <!-- Modal para confirmar la eliminación -->
                <div class="modal fade" id="eliminarModal{{ curso_inscripcion.estudiante.id }}" tabindex="-1" aria-labelledby="eliminarModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="eliminarModalLabel">Confirmar eliminación</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                ¿Estás seguro de que quieres eliminar la suscripción de {{ curso_inscripcion.estudiante.username }}?
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                <button type="button" class="btn btn-danger" onclick="eliminarSuscripcion({{ curso_inscripcion.estudiante.id }}, {{ curso_inscripcion.curso.id }})">Eliminar</button>
                            </div>
                        </div>
                    </div>
                </div>

                {% empty %}
                <tr>
                    <td colspan="5">No hay estudiantes registrados.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock contenido %}

{% block js %}
<script src="{% static 'js/eliminar_inscritos_admin.js' %}"></script>
{% endblock js %}

{% block pagination %}
{% include 'paginacion.html' %}
{% endblock pagination %}
