{% load static %}

{% include "_cabecera.html" %}

<body {% if debug %}class="has-debug-banner"{% else %}class="app"{% endif %}>
    {% if debug %}
    <div class="debug-banner">
        <i class="bi bi-exclamation-triangle-fill"></i>
        MODO DEBUG HABILITADO - No usar en Producción
    </div>
    {% endif %}

    <header class="app-header fixed-top">	   	            
        <div class="app-header-inner">  
            <div class="container-fluid py-2">
                <div class="app-header-content"> 
                    <div class="row justify-content-between align-items-center">
                    
                        <div class="col-auto">
                            <a id="sidepanel-toggler" class="sidepanel-toggler d-inline-block d-xl-none" href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg>
                            </a>
                        </div><!--//col-->

                        <div class="app-utilities col-auto">
                            {% block menuapp %}

                            <div class="app-utility-item app-user-dropdown dropdown">
                            </div>

                            {% endblock menuapp %}

                            <div class="app-utility-item app-user-dropdown dropdown">
                                {% if user.is_authenticated %}
                                <a class="dropdown-toggle" id="user-dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><img src=" {{user.foto.url }}"></a>
                                {% else %}
                                <a class="dropdown-toggle" id="user-dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Sin usuario</a>
                                {% endif %}
                                <ul class="dropdown-menu" aria-labelledby="user-dropdown-toggle">
                                    {% if user.is_authenticated %}
                                    <li>
                                        <a class="dropdown-item">{{ user.nombre }}</a>
                                    </li>
                                    <li><a class="dropdown-item">                        
                                        <form method="post" action="{% url 'password_change' %}" >
                                            {% csrf_token %}
                                            <button
                                            style="background: none!important;
                                                        border: none;
                                                        padding: 0!important;
                                                        /*optional*/
                                                        font-family: arial, sans-serif;
                                                        /*input has OS specific font-family*/
                                                        /*color: #069;
                                                        text-decoration: underline;*/
                                                        cursor: pointer;"   
                                                
                                            type="submit">Cambiar contraseña</button>
                                        </form></a>
                                    </li>
                                    <li><a class="dropdown-item">                        
                                        <form method="post" action="{% url 'logout' %}" >
                                            {% csrf_token %}
                                            <button
                                            style="background: none!important;
                                                        border: none;
                                                        padding: 0!important;
                                                        /*optional*/
                                                        font-family: arial, sans-serif;
                                                        /*input has OS specific font-family*/
                                                        /*color: #069;
                                                        text-decoration: underline;*/
                                                        cursor: pointer;"   
                                                
                                            type="submit">Salir</button>
                                        </form></a>
                                    </li>
                                    {% else %}
                                    <li><a class="dropdown-item" href="{% url 'login' %}">Entrar</a></li>
                                    {% endif %} 
                                </ul>
                            </div><!--//app-user-dropdown--> 
                        </div><!--//app-utilities-->

                    </div><!--//row-->
                </div><!--//app-header-content-->
            </div><!--//container-fluid-->
        </div><!--//app-header-inner-->

        <div id="app-sidepanel" class="app-sidepanel"> 
            <div id="sidepanel-drop" class="sidepanel-drop"></div>
            <div class="sidepanel-inner d-flex flex-column">
                <a href="#" id="sidepanel-close" class="sidepanel-close d-xl-none">&times;</a>

                {% include "_branding.html"  %}
                
            <nav id="app-nav-main" class="app-nav app-nav-main flex-grow-1">
                <ul class="app-menu list-unstyled accordion" id="menu-accordion">
                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link active" href="{% url 'dashboard' %}">
                            <span class="nav-icon">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-door" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M7.646 1.146a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5H9.5a.5.5 0 0 1-.5-.5v-4H7v4a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6zM2.5 7.707V14H6v-4a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v4h3.5V7.707L8 2.207l-5.5 5.5z"/>
                                <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                            </svg>
                             </span>
                             <span class="nav-link-text">Principal</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->

                    {% if user.is_authenticated %}

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'buscatotal' %}">
                            <span class="nav-icon">
                            <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                            </svg>
                            </span>
                             <span class="nav-link-text">Buscar</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->

                     <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->

                        <a class="nav-link" href="{% url 'agregar_movimiento' %}?origen=Efectivo&destino=Alcampo">
                            <span class="nav-icon">
                            <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-files" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M4 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4z"/>
  <path d="M6 0h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1H4a2 2 0 0 1 2-2z"/>
</svg>
                             </span>
                             <span class="nav-link-text">Agregar movimiento</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->

                     <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'listar_cuentas' %}">
                            <span class="nav-icon">
                            <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bank" viewBox="0 0 16 16">
                                <path d="m8 0 6.61 3h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.38l.5 2a.498.498 0 0 1-.485.62H.5a.498.498 0 0 1-.485-.62l.5-2A.5.5 0 0 1 1 13V6H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 3h.89zM3.777 3h8.447L8 1zM2 6v7h1V6zm2 0v7h2.5V6zm3.5 0v7h1V6zm2 0v7H12V6zM13 6v7h1V6zm2-1V4H1v1zm-.39 9H1.39l-.25 1h13.72z"/>
                            </svg>
                             </span>
                             <span class="nav-link-text">Ver cuentas</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'listar_categorias' %}">
                            <span class="nav-icon">
                            <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tags" viewBox="0 0 16 16">
                                <path d="M3 2a1 1 0 0 1 .707.293l9 9a1 1 0 0 1 0 1.414l-2.5 2.5A1 1 0 0 1 10.5 15h-7a1 1 0 0 1-1-1V3a1 1 0 0 1 .293-.707L2.293.293A1 1 0 0 1 3 .001zM4.5 4a.5.5 0 1 0-1.001-.001A.5.5 0 0 0 4.5 4zm6.364-.364L4.707 2H3v2h7V3h-2.707l5.657-5.657a.5.5 0 0 1 .707.707z"/>
                                <path d="M11.354 8.646a.5.5 0 0 1 .707-.707l2.5-2.5a1.00101 1.00101 0 0 1 .293-.207V10h-7V9h6v-.707a1.00101 1.00101 0 0 1 .293-.207l-2.5-2.5z"/>
                            </svg>
                             </span>
                             <span class="nav-link-text">Ver categorías</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
                    
                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'repostajes:principal' %}">
                            <span class="nav-icon">
                            <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-car-front" viewBox="0 0 16 16">
                                <path d="M4 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0m10 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M6 8a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2zM4.862 4.276 3.906 6.19a.51.51 0 0 0 .497.731c.91-.073 2.35-.17 3.597-.17s2.688.097 3.597.17a.51.51 0 0 0 .497-.731l-.956-1.913A.5.5 0 0 0 10.691 4H5.309a.5.5 0 0 0-.447.276"/>
                                <path d="M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596 2.298 1.515l.792 1.848c.075.175.21.319.38.404.5.25.855.715.965 1.262l.335 1.679q.05.242.049.49v.413c0 .814-.39 1.543-1 1.997V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.338c-1.292.048-2.745.088-4 .088s-2.708-.04-4-.088V13.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.892c-.61-.454-1-1.183-1-1.997v-.413a2.5 2.5 0 0 1 .049-.49l.335-1.68c.11-.546.465-1.012.964-1.261a.8.8 0 0 0 .381-.404l.792-1.848ZM4.82 3a1.5 1.5 0 0 0-1.379.91l-.792 1.847a1.8 1.8 0 0 1-.853.904.8.8 0 0 0-.43.564L1.03 8.904a1.5 1.5 0 0 0-.03.294v.413c0 .796.62 1.448 1.408 1.484 1.555.07 3.786.155 5.592.155s4.037-.084 5.592-.155A1.48 1.48 0 0 0 15 9.611v-.413q0-.148-.03-.294l-.335-1.68a.8.8 0 0 0-.43-.563 1.8 1.8 0 0 1-.853-.904l-.792-1.848A1.5 1.5 0 0 0 11.18 3z"/>
                            </svg>
                             </span>
                             <span class="nav-link-text">Repostajes</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->

                    {% endif %}

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'acerca_de' %}">
                           <span class="nav-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-square" viewBox="0 0 16 16">
                              <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
                              <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                            </svg>
                            </span>
                                <span class="nav-link-text">Acerca de...</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
                </ul><!--//app-menu-->
            </nav><!--//app-nav-->            
            </div><!--//sidepanel-inner-->
        </div><!--//app-sidepanel-->

    </header><!--//app-header-->

    <div class="app-wrapper">
	    <div class="app-content pt-3 p-md-3 p-lg-4">
			{% block content %}{% endblock %}
	    </div><!--//app-content-->
        {% include "_footer.html" %}
    </div><!--//app-wrapper-->

     <!-- Javascript -->          
    <script src="{% static 'plugins/popper.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>  

    <!-- Charts JS 
    <script src="{%  static 'plugins/chart.js/chart.min.js' %}"></script> 
    <script src="{%  static 'js/index-charts.js' %}"></script> 
    -->
    <!-- La línea siguiente es para la demo de los charts en charts.html 
    <script src="{%  static 'js/charts-demo.js' %}"></script> 
    -->
    
    <!-- Page Specific JS -->
    <script src="{% static 'js/app.js' %}"></script> 
    </body>
</html> 
