{% load static %}

{% include "_head.html"  %}

<body class="app">
  <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">
                    {% if user.is_authenticated %}

                    <li class="nav-item"></li>
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'eventos:lista_eventos' %}">
                            <span class="nav-icon">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                                <path fill-rule="evenodd" d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
                                <circle cx="3.5" cy="5.5" r=".5"/>
                                <circle cx="3.5" cy="8" r=".5"/>
                                <circle cx="3.5" cy="10.5" r=".5"/>
                              </svg>
                              
                             </span>
                             <span class="nav-link-text">Pozos</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
                    {% endif %}

                    {% if user.is_staff %}

                    <li class="nav-item"></li>
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'eventos:crear_evento' %}">
                           <span class="nav-icon">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-columns-gap" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M6 1H1v3h5V1zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12h-5v3h5v-3zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8H1v7h5V8zM1 7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H1zm14-6h-5v7h5V1zm-5-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1h-5z"/>
                              </svg>
                            </span>
                                <span class="nav-link-text">Crear un nuevo evento</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
                    
                    {% endif %}

                    <li class="nav-item"></li>
                        <a class="nav-link" href="{% url 'eventos:estadisticas_por_usuario' %}">
                           <span class="nav-icon">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
                           </svg>
                            </span>
                                <span class="nav-link-text">Estadísticas por usuario</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->

                    <li class="nav-item">
                        <!--//Bootstrap Icons: https://icons.getbootstrap.com/ -->
                        <a class="nav-link" href="{% url 'ayuda' %}">
                           <span class="nav-icon">
                           <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
   <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
 </svg>
                            </span>
                                <span class="nav-link-text">Ayuda</span>
                        </a><!--//nav-link-->
                    </li><!--//nav-item-->
{% if request.user.is_authenticated and request.user.email == "creylopez@yahoo.es" %}
                    <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-->
{% endif %}
 
                </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> 

