<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></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 rel="shortcut icon" type="image/png" href="{% static 'images/favicon.png' %}"/>
    
    <script src="https://unpkg.com/htmx.org@1.9.4"></script>
    <title>
        {% block titulo %}    
          
        {% endblock titulo %}
    </title>
    {% block head %}

    {% endblock head %}
  </head>

  <body class="pagina-fondo">
    {% 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 p-0" >
         

      {% block body %}
      {% endblock body %}
    </div>

    
    {% include 'base_custom_js.html' %}

  </body>
</html>