{% extends "main/base.html" %}
{% from 'main/macros.html' import AppAnchor %}

{% block header %}
    <!-- BEGIN: Header-->

    <!-- END: Header-->
{% endblock header %}

{% block sidenav %}
    <div id="show-sidenav" class="draggable z-depth-1 hide">
        <i class="material-icons-outlined theme-on-primary-text pointer">chevron_right</i>
    </div>
    <!-- BEGIN: SideNav-->
    <aside id="main-sidenav" class="sidenav-main nav-collapsed nav-collapsible sidenav-light sidenav-active-rounded z-depth-2">
        <ul class="sidenav sidenav-collapsible leftside-navigation collapsible sidenav-fixed menu-shadow pt-2 theme-surface-transparent1" id="slide-out" data-menu="menu-navigation" data-collapsible="accordion">

            <li class="bold"><a id="dashboard-sidenav" class="waves-effect waves-cyan" href="{{ url_for('main.home') }}">
                <i class="material-icons-outlined">dashboard</i>
                <span class="menu-title" data-i18n="">Dashboard</span>
            </a></li>

            <li class="bold"><a id="settings-sidenav" class="waves-effect waves-cyan" href="{{ url_for('settings_system.settings') }}">
                <i class="material-icons-outlined">settings</i>
                <span class="menu-title" data-i18n="">Settings</span>
            </a></li>

            {% if current_user.is_authenticated %}
                <li class="bold"><a id="logout-sidenav" class="waves-effect waves-cyan" href="{{ url_for('user_system.logout') }}">
                    <i class="material-icons-outlined">exit_to_app</i>
                    <span class="menu-title" data-i18n="">Logout</span>
                </a></li>
            {% else %}
                <li class="bold"><a id="login-sidenav" class="waves-effect waves-cyan" href="{{ url_for('user_system.login') }}">
                    <i class="material-icons-outlined">account_circle</i>
                    <span class="menu-title" data-i18n="">Login</span>
                </a></li>
            {% endif %}

            <li class="bold"><a id="hide-sidenav" class="waves-effect waves-cyan hide-on-med-and-down" href="#">
                <i class="material-icons-outlined">menu_open</i>
                <span class="menu-title" data-i18n="">Hide Sidenav</span>
            </a></li>

            {% for app in apps %}
                {% if app.type == "app" and app.sidebar_icon %}
                    <li class="bold">
                        {{ AppAnchor(app) }}
                        <img src="{{ app.sidebar_icon }}" style="position: relative; top: 5px; left: 2px; margin-right: 18px; height: 24px">
                        <span class="menu-title" data-i18n="">{{ app.name }}</span>
                        </a></li>
                {% endif %}
            {% endfor %}

        </ul>
               <a id="sidenav-mobile-toggle-btn"
                  class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary"
                  href="#" data-target="slide-out">
                   <i class="material-icons-outlined theme-on-primary-text">menu</i>
               </a>
    </aside>
    <!-- END: SideNav-->

{% endblock sidenav%}

{% block footer %}
    <div id="no-sidenav" class="card theme-surface-transparent hide" style="position: fixed; bottom: 0; right: 10px;">
        <div class="card-content p-1">
            <span>
                {% if current_user.is_authenticated %}
                    <a class="waves-effect waves-cyan" href="{{ url_for('user_system.logout') }}">
                        <i class="material-icons-outlined icon-btn">exit_to_app</i>
                    </a>
                {% else %}
                    <a class="waves-effect waves-cyan" href="{{ url_for('user_system.login') }}">
                        <i class="material-icons-outlined icon-btn">account_circle</i>
                    </a>
                {% endif %}
                <a class="waves-effect waves-cyan" href="{{ url_for('settings_system.settings') }}">
                    <i class="material-icons-outlined icon-btn">settings</i>
                </a>
                <a class="waves-effect waves-cyan" href="{{ url_for('main.home') }}">
                    <i class="material-icons-outlined icon-btn">dashboard</i>
                </a>
            </span>
        </div>
    </div>
    <!-- BEGIN: Footer-->
    <!-- <footer class="page-footer footer footer-static footer-light navbar-border navbar-shadow">
      <div class="footer-copyright">
        <div class="container"><span>&copy; 2019 All rights reserved.</span><span class="right hide-on-small-only">DashMachine</span></div>
      </div>
    </footer> -->
    <!-- END: Footer-->
{% endblock footer %}