{% extends 'base.html' %}

{% block titulo %}    
Lista de instituciones          
{% endblock titulo %}

{% block body %}    
    {% include 'admin/config_nav.html' %}

    <div class="row align-items-center m-0">
        <p class="col-4 h2 mx-3 mt-3">Lista de Instituciones</p>
        <div class="col mt-5 mx-3">
            <div class="row align-items-center">
                <div class="col-auto p-0">
                    <i class="fa fa-info-circle font-md" aria-hidden="true" data-bs-original-title="<b>Puede buscar cambiando las palabras o contenido y en los atributos que necesite</b><br><br><b>juan zacatecas</b><br>Busca elementos que contengan 'juan' y 'zacatecas'<br><br><b>nombre:juan</b><br>Busca elementos cuyo atributo nombre contenga 'juan'<br><br><b>~juan ~maria</b><br>Busca elementos que contengan o 'juan' o 'maria'<br><br><b>juan -zacatecas</b><br>Busca elementos que contengan 'juan' y no contengan 'zacatecas'" data-bs-html="true" ></i>
                </div>
                <div class="col">
                    <form class="d-flex" role="search" method="GET">                
                        <input
                        class="form-control me-2"
                        type="search"
                        placeholder="Buscar por Nombre, Institución, Puntaje, etc."
                        name="search"
                        aria-label="Search"
                        value="{{ request.GET.search}}"
                        >
                        <button class="btn btn-outline-success" type="submit">Buscar</button>
                    </form>
                </div>                
            </div>
        </div>
    </div>
    
    
    <div style="border-radius: 15px;" class="m-3 py-3 border border-2 borde-pagina-principal  horizontal-scroll">    
        
        <table class="table custom-table-simple">
            <div class="row mx-0">
                <div class="col ps-0">
                    <p class="h4 mx-3">Instituciones</p>           
                </div>
                <div class="col-auto">                    
                    <button  type="button" class="btn rounded-4 btn-a-seccion btn-aceptado p-1 px-3 mx-3 font-sm d-flex align-items-center" onclick="showFormModal('{% url 'usuarios:ACrearInstitucion' %}', 'GET')" > <p class="m-0 mb-1">Nueva Institución</p> </button>                                
                </div>
            </div>
            <thead>
                <tr>
                    <th class="borde-pagina-gris text-center" style="width: 8%; border-bottom: 2px solid;"> ID</th>
                    <th class="borde-pagina-gris" style="width: auto; max-width: 5rem; border-bottom: 2px solid;"> Nombre</th>
                    <th class="borde-pagina-gris text-center" style="width: 5rem; border-bottom: 2px solid;"> Puntos</th>                    
                    <th class="borde-pagina-gris " style="width: 10rem; border-bottom: 2px solid;"> </th>
                </tr>
            </thead>
            <tbody>
                {% for institucion in page_insti %}                
                <tr>                    
                    <td class="text-center">{{ institucion.id }}</td>
                    <td class="text-start">{{ institucion.nombre }}</td>
                    <td class="text-center">{{ institucion.puntos }}</td> 
                    <td style="text-align: right;">
                        <div class="d-flex align-items-center justify-content-center ">
                            <button type="button" onclick="showFormModal('{% url 'usuarios:AListaCarreras' institucion.id %}', 'GET')" title="Lsta de carreras" class="line-height-normal btn p-0 m-0 mx-2" data-bs-original-title="Lista de carreras">
                                <i class="fa fa-list-ol m-0 text-primary " style="font-size: 20px;"></i>
                            </button>  
                            <button type="button" onclick="showFormModal('{% url 'usuarios:AEditarInstitucion' institucion.id %}', 'GET')" title="Editar" class="line-height-normal btn p-0 m-0 mx-2" data-bs-original-title="Editar institución">
                                <i class="fa fa fa-pencil m-0 text-warning " style="font-size: 20px;"></i>
                            </button>  
                            <form class="p-0 m-0" action="{% url 'usuarios:AEliminarInstitucion' institucion.id %}" method="get" >                                                        
                                <button id="btnEliminar" type="button" onclick="confrimSubmit(this, '¿Desea eliminar esta institución? <br> {{institucion.nombre}}')" title="Eliminar Institución" class="line-height-normal btn p-0 m-0 mx-2" data-bs-original-title="Eliminar Institución">
                                    <i class="fa fa-trash-o texto-cancelar-activado m-0" style="font-size: 20px;"></i>
                                </button>                                
                            </form>
                        </div>
                    </td>               
                </tr>
                
                {% endfor %}
            </tbody>
        </table>
        <div class="pagination mx-3 font-semi-bold font-md justify-content-end">
            <span class="step-links">                                
                <span class="current font-xs me-1">
                    Página {{ page_insti.number }} / {{ page_insti.paginator.num_pages }}.
                </span>                
                {% if page_insti.has_previous %}                    
                    <a href="{{ request.path }}?search={{ request.GET.search }}&page=1" class="fa fa-angle-double-left" aria-hidden="true"></a>
                    <a href="{{ request.path }}?search={{ request.GET.search }}&page={{ page_insti.previous_page_number }}" class="fa fa-angle-left" aria-hidden="true"> </a>                    
                {% endif %}
                {% if page_insti.has_next %}
                    <a href="{{ request.path }}?search={{ request.GET.search }}&page={{ page_insti.next_page_number }}" class="fa fa-angle-right" aria-hidden="true"> </a>
                    <a href="{{ request.path }}?search={{ request.GET.search }}&page={{ page_insti.paginator.num_pages }}" class="fa fa-angle-double-right" aria-hidden="true"> </a>
                {% endif %}                
            </span>
        </div>
    </div>
{% endblock body %}