{% 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"/>
        {% block turbolinks-cache-control %}<meta name="turbolinks-cache-control" content="no-cache">{% endblock %}
        <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 %}"><dmc-turbolinks/>
        {% block body %}
        <header>
            {% block header %}
            <dmc-sidenav>
                <ul id="slide-out" class="sidenav sidenav-fixed">
                    {% 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>
            </dmc-sidenav>
            {% endblock %}
        </header>
        <main>
            {% block main %}
            {% block topbar %}
            <nav class="topbar">
                <div class="nav-wrapper">
                    <dmc-sidenav-trigger><a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a></dmc-sidenav-trigger>
                    <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 %}
        <dmc-snackbar>
            {% for message in messages %}
            <p class="alert-{{ message.tags }}">{{ message|capfirst }}</p>
            {% endfor %}
        </dmc-snackbar>
        {% endblock messages %}
    </body>
</html>
