{% load static %}
{% load bootstrap4 %}
<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>
            {% block title %}Recording Contexts{% endblock %}
        </title>

        <link rel="icon"
              type="image/png"
              href="{% static 'rek.png' %}">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" type="text/javascript"></script>

        <link href="{% static 'css/mystyle.css' %}" rel="stylesheet">
        <link href="{% static 'css/app.css' %}" rel="stylesheet">
        <link href="{% static 'css/snackbar.css' %}" rel="stylesheet">
        <link href="{% static 'css/login.css' %}" rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


    </head>
    <body>
        <div id="drawer-container" class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay-md-down {% if user.is_authenticated %}bmd-drawer-in-lg-up {% endif %}">
            <header class="bmd-layout-header">
                <div class="navbar bg-dark text-white bg-faded {% if user.is_authenticated %}justify-content-lg-end justify-content-sm-between{% else %}justify-content{% endif %}">
                    {% if not user.is_authenticated %}
                        <a class="navbar-brand" href="{% if user.is_authenticated %}{% url 'index' %}{% else %}{% url 'index' %}{% endif %}">
                            <img src="{% static 'logo_ReC.png' %}" width="100" height="50" alt="">
                            Recording Contexts
                        </a>
                        <a id="user-login" href="{% url 'login' %}">¿Administrador?</a>
                    {% endif %}
                    {% if user.is_authenticated %}
                        <button class="navbar-toggler text-white" type="button" id="drawer-toggler" data-toggle="drawer" data-target="#dw-s1">
                            <span class="sr-only">Toggle drawer</span>
                            <i class="fa fa-bars" aria-hidden="true"></i>
                        </button>
                    {% endif %}
                    <ul class="nav navbar-nav" id="pageNav">
                        <li class="nav-item page-nav">{% block page_navigation %} {% endblock %}</li>
                    </ul>
                    {% if user.is_authenticated %}
                        <a id="user-login" href="{% url 'logout' %}">{{ user.username }}</a>
                    {% endif %}

                </div>
            </header>

            <div id="dw-s1" class="bmd-layout-drawer bg-faded bg-primary text-white" aria-expanded="true" aria-hidden="false">
                <header class="bg-primary text-white">
                    <a class="navbar-brand" href="{% url 'index' %}">
                        <img src="{% static "logo_ReC.png" %}" width="150" height="80" alt="">
                    </a>
                </header>
                <ul class="list-group">
                        <a id="profile" href="{% url 'adminedit' user.username %}" class="list-group-item list-group-item-action"><i class="fa fa-users fa-1x"></i>Cambiar datos</a>
                        <a id="profile" href="{% url 'adminprofile' user.username %}" class="list-group-item list-group-item-action"><i class="fa fa-wpforms fa-1x"></i>Formularios</a>
                        <!--<a id="termsofuse" href="#" class="list-group-item list-group-item-action"><i class="fa fa-balance-scale fa-1x"></i>Terms of Use</a>-->
                </ul>
            </div>

            <main class="bmd-layout-content">
                <br>
                <br>
                <br>
                <div class="container">
                    {% block body %}
                    {% endblock %}
                </div>
                <div class="material-float-buttons">
                    {% block action_buttons %}
                    {% endblock %}
                </div>
                {% block footer1 %}
                    {% include 'footer.html' %}
                {% endblock %}
            </main>
        </div>

    {% block javascripts %}

        <script>

            function toggleDrawer() {
                $drawer = $('#drawer-container');
                if ($drawer.hasClass('bmd-drawer-in')) {
                    $drawer.removeClass('bmd-drawer-in');
                }else{
                    $drawer.addClass('bmd-drawer-in');
                }
            }
            $(document).on('show.bs.modal', '.modal', function () {
                $(this).appendTo('body');
            });
        </script>
    {% endblock %}
    </body>


</html>
