<!doctype html>
<html lang="en">
  <head>
    {% load static %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>    

    <!-- Option 1: Bootstrap Bundle with Popper -->    
    
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->

    <!-- Bootstrap CSS -->
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/font-awesome.css' %}">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">
    <link href="{% static 'css/modalidades.css' %}" rel="stylesheet">   

    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.png' %}"/>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link href="{% static 'css/jquery.toast.css' %}" rel="stylesheet"> 
    
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.4"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <title>
        {% block titulo %}    
          
        {% endblock titulo %}
    </title>
  </head>

  <body>
    {% include "mensajes.html" %}
    {% include "custom_confirm.html" %}
    <div >
      <div class="modal fade" id="modal-base-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div id="modal-base-cont" class="modal-dialog modal-dialog-centered" role="document">
          {% include "modal_base.html" %}
        </div>
      </div>
    </div>
    

    <!-- Seccion de la barra lateral  -->    
    <div class="container-fluid" style="padding: 0px;">
      <div class="row" style="margin: 0px;">
        <div class="col-auto nopadding border-end border-2 borde-pagina-principal">
          <div class="sticky-top d-flex flex-column justify-content-between flex-shrink-0 p-3 bg-light" style="max-width: 280px; height: 100vh;">
            <a href="#" class="d-flex flex-column align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
              <img class="img-fluid w-75" src="{% static 'images/LogoCozcyt.png' %}" alt="Logo" >              
              <span class="fs-4 h4">Sistema de impulso <br> al Talento</span>
            </a>
            <hr>
            {% with url_name=request.resolver_match.url_name %}
            <ul class="nav nav-pills flex-column mb-auto ">              
              {% if perms.usuarios.permiso_administrador and request.user.is_superuser == 1 %}
              <li class="nav-item">
                <a href="{% url 'usuarios:AInicio' %}" class="nav-link d-flex link-dark {% if url_name == 'AInicio' %}active{% endif %} h4">
                  <i class="fa fa-shield px-2 align-self-center" aria-hidden="true"> </i>
                  Inicio
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'solicitudes:ASolicitudes' %}" class="nav-link d-flex link-dark {% if url_name == 'ASolicitudes' %}active{% endif %} h4">
                  <i class="fa fa-list-ul px-2 align-self-center" aria-hidden="true"> </i>
                  Solicitudes
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'usuarios:AEstadisticas' %}" class="nav-link d-flex link-dark {% if url_name == 'AEstadisticas' %}active{% endif %} h4">
                  <i class="fa fa-bar-chart px-2 align-self-center" aria-hidden="true"> </i>
                  Estadisticas
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'usuarios:AUsuarios' %}" class="nav-link d-flex link-dark {% if url_name == 'AUsuarios' %}active{% endif %} h4">
                  <i class="fa fa-users px-2 align-self-center" aria-hidden="true"> </i>
                  Lista Usuarios
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'usuarios:AConfigGeneral' %}" class="nav-link d-flex link-dark {% if 'onfig' in url_name %}active{% endif %} h4">
                  <i class="fa fa-cog px-2 align-self-center" aria-hidden="true"> </i>
                  Configuracion
                </a>
              </li>

              {% else %}
              <li class="nav-item">
                <a href="{% url 'usuarios:perfil' %}" class="nav-link d-flex link-dark {% if url_name == 'perfil' %}active{% endif %} h4" aria-current="page">
                  <i class="fa fa-user-circle px-2 align-self-center" aria-hidden="true"> </i>
                  Perfil
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'usuarios:mensajes' %}" class="nav-link d-flex link-dark {% if url_name == 'mensajes' %}active{% endif %} h4">
                  <i class="fa fa-envelope px-2 align-self-center" aria-hidden="true"> </i>
                  mensajes
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'solicitudes:convocatorias' %}" class="nav-link d-flex link-dark {% if url_name == 'convocatorias' %}active{% endif %} h4">
                  <i class="fa fa-list-alt px-2 align-self-center" aria-hidden="true"> </i>
                  Convocatoria
                </a>
              </li>
              <li class="nav-item ">
                <a href="{% url 'estudioSE:estudioSE' %}" class="nav-link d-flex link-dark {% if url_name == 'estudioSE' %}active{% endif %} h4" style="text-align: left;">
                  <i class="fa fa-id-card-o px-2 align-self-center" aria-hidden="true"> </i>
                  Estudio Socioeconómico
                </a>
              </li>
              <li class="nav-item">
                <a href="{% url 'solicitudes:historial' %}" class="nav-link d-flex {% if url_name == 'historial' %}active{% endif %} link-dark h4">
                  <i class="fa fa-clock-o px-2 align-self-center" aria-hidden="true"> </i>
                  Historial
                </a>
              </li>
              {% endif %}
            </ul>
            {% endwith %}
            <hr>
            <div >  
              <a href="{% url 'usuarios:logout' %}" class="link-dark h6">           
                <i class="fa fa-sign-out px-2 align-self-center" aria-hidden="true"> </i>
                <strong>Cerrar sesión  </strong>    
              </a>        
            </div>
          </div>
        </div>
        <div class="col nopadding nomargin d-flex flex-column justify-content-between">
          <div class="mb-auto ">

            {% block body %}
            {% endblock body %}

          </div>
          
          <!-- Pie de pagina -->
          <footer>
            <div class="container-fluid text-center pagina-fuerte">
              <p class=" nomargin" style="color: #fff;">Este es el pie página.</p>
            </div>
          </footer>
        </div>                
      </div>
    </div>
        
    {% include 'base_custom_js.html' %}

  </body>
</html>