{% extends 'gakusei/filter-layout.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block style %}
    <link rel="stylesheet" href="{% static 'gakusei/select2/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'gakusei/select2/select2-bootstrap-5-theme.min.css' %}">
{% endblock %}

{% block script %}
    <script src="{% static 'gakusei/js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'gakusei/select2/select2.full.min.js' %}"></script>

    <script>
        $(document).ready(function() {
            let opciones = {
                placeholder: "----------",
                allowClear: true,
                containerCssClass : 'select form-select',
                theme: "bootstrap-5",
                width: 'auto',
            }
            
            $("#id_curso").select2(opciones);
            $("#id_sensei").select2(opciones);
            $("#id_sede").select2(opciones);
        });
    </script>
{% endblock %}


    {% block regresar-url %}{% url 'solvencias-clase' %}{% endblock %}

    {% block card-title %}Buscar Solvencias por Clase{% endblock %}


    {% block url-filter-form %}{% url 'solvencias-filter' %}{% endblock %}
    {% block url-filter-button %}{% url 'solvencias-filter' %}{% endblock %}


    {% block thead %}
        <th>Clase</th>
        <th>N. Estudiantes</th>
        <th></th>
    {% endblock %}

    {% block tbody %}
        {% for clase in object_list %}
            <tr>
                <td>{{clase}}</td>
                <td>{{clase.inscripciones.count}}</td>

                <td class="text-center align-middle"><a href="{% url 'solvencias-clase-detail' clase.id %}"><i class="fs-4 fa-solid fa-eye"></i></a></td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="2" class="text-center fw-bold fst-italic">Sin Registros</td>
            </tr>
        {% endfor %}
    {% endblock %}