{% load i18n static %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
    <head>
        {% block head %}
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        <title>{% block title %}{% endblock %}</title>
        {% block favicon %}<link href="{% static 'material/imgs/favicon.png' %}" rel="shortcut icon">{% endblock %}
        {% block css %}{% include 'material/frontend/includes/material_css.html' %}{% endblock css %}
        {% block js %}{% include 'material/frontend/includes/material_js.html' %}{% endblock js %}
        {% block extrahead %}{% endblock %}
        {% endblock head %}
    </head>
    <body class="{%block bodyclass %}with-sidebar{% endblock %}">
        {% block body %}
        <header>
            {% block header %}
            <ul id="slide-out" class="sidenav sidenav-fixed" data-turbolinks-permanent>
                {% block sidenav_header %}
                <li>
                    <div class="user-view">
                        <div class="background" >
                          <img src="{% static 'material/imgs/sidenav.svg' %}">
                        </div>
                        {% block userphoto %}
                        {% if user.photo.url %}
                        <a href="#"><img class="circle" src="{{ user.photo.url }}"></a>
                        {% else %}
                        <a href="#"><img class="circle" src="{% static 'material/imgs/user.png' %}"></a>
                        {% endif %}
                        {% endblock %}
                        <a href="#"><span class="white-text name">{{ request.user.get_username|title }}</span></a>
                        <a href="#"><span class="white-text email">{{ request.user.email }}</span></a>
                    </div>
                </li>
                {% endblock %}
                {% block sidenav_items %}
                {% for module in modules %}
                {% if current_module == module %}
                <li class="active">
                    <ul class="collapsible collapsible-accordion">
                        <li>
                            <a href="{{ module.index_url }}" class="collapsible-header active">{{ module.verbose_name }}{{ module.icon|safe }}</a>
                            <div class="collapsible-body" style="display:block">
                                {% include module.menu %}
                            </div>
                        </li>
                    </ul>
                </li>
                {% else %}
                <li {% if forloop.last %}class="last"{% endif %}>
                    <a href="{{ module.index_url }}" class="collapsible-header" data-turbolinks="false">{{ module.verbose_name }}{{ module.icon|safe }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endblock sidenav_items %}
            </ul>
            {% endblock %}            
        </header>
        <main>
            {% block main %}
            {% block topbar %}
            <nav class="topbar">
                <div class="nav-wrapper">
                    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
                    <div class="brand-logo">
                        {% block page_title %}{% endblock %}
                    </div>
                    <ul id="nav-mobile" class="right hide-on-med-and-down">
                        {% block topbar_links %}
                        {% if user.is_authenticated %}
                        <li><a href="{% url 'logout' %}" data-turbolinks="false"><i class="material-icons right">exit_to_app</i>{% trans "Log out" %}</a></li>
                        {% else %}
                        <li><a href="{% url 'login' %}" data-turbolinks="false"><i class="material-icons right">lock_open</i>{% trans "Log in" %}</a></li>
                        {% endif %}
                        {% endblock %}
                    </ul>
                </div>
            </nav>
            {% endblock topbar %}
            {% block breadcrumbs %}
            <nav class="breadcrumbs">
                <div class="nav-wrapper">
                    {% block breadcrumbs_items %}{% endblock %}
                </div>
            </nav>
            {% endblock %}
            {% block main_content %}
            <div class="content">
                {% block content %}{% endblock %}
            </div>
            {% endblock main_content %}
            {% endblock main %}
        </main>
        <footer>
            {% block footer %}{% endblock footer %}
        </footer>
        {% endblock %}
        {% block messages %}
        {% if messages %}
        <script id="messages" type="text/javascript">
            $(document).one('turbolinks:load', function () {
              {% for message in messages %}
              M.toast({html: '{{ message|capfirst }}', displayLength: 10000, classes:'alert-{{ message.tags }}'})
              {% endfor %}
            });
        </script>
        {% endif %}
        {% endblock messages %}
    </body>
</html>
