{% extends "main/base.html" %}
{% from 'global_macros.html' import SidenavToggle, ActionBar %}
{% from 'main/cards.html' import SidenavApps %}

{% block header %}
    <!-- BEGIN: Header-->
    {% if access_group.can_see_sidenav == "True" %}
        <div id="sidenav-toggle" style="position: fixed; z-index: 8000">
            {{SidenavToggle()}}
        </div>
    {% else %}
        <div class="fixed-action-btn">
            <a href="{{ url_for('user_system.login') }}" class="btn-floating theme-primary">
                <i class="material-icons-outlined theme-on-primary-text">person</i>
            </a>
        </div>
    {% endif %}
    <!-- END: Header-->
{% endblock header %}

{% block sidenav %}
    <div id="card-editor-sidenav" class="sidenav z-depth-4 theme-background">
        <div class="row padding-2">
            <div class="col s12">
                <div id="card-editor-container" data-url="{{ url_for('main.load_card_editor') }}">
                    <div class="progress">
                        <div class="indeterminate"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="config-editor-sidenav" class="sidenav z-depth-4 theme-background">
        <div class="row padding-2">
            <div class="col s12">
                <div id="config-editor-container" data-url="{{ url_for('main.load_config_editor') }}">
                    <div class="progress">
                        <div class="indeterminate"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="settings-editor-sidenav" class="sidenav z-depth-4 theme-background">
        <div class="row padding-2">
            <div class="col s12">
                <div id="settings-editor-container" data-url="{{ url_for('main.load_settings_editor') }}">
                    <div class="progress">
                        <div class="indeterminate"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="main-sidenav" class="sidenav theme-background z-depth-5" style="z-index: 8001">
        <div class="row mt-2 mr-2 ml-2">
            {% if current_user %}
                <span id="toggle-user-theme-btn" data-url="{{ url_for('main.toggle_theme') }}" data-user_id="{{ current_user.id }}">
                    {% if current_user.theme %}
                        {% if current_user.theme == "light" %}
                            <i class="material-icons-outlined icon-btn theme-secondary-text">toggle_off</i>
                        {% elif current_user.theme == "dark" %}
                            <i class="material-icons-outlined icon-btn theme-primary-text">toggle_on</i>
                        {% endif %}
                    {% else %}
                        {% if settings.theme == "light" %}
                            <i class="material-icons-outlined icon-btn theme-secondary-text">toggle_off</i>
                        {% elif settings.theme == "dark" %}
                            <i class="material-icons-outlined icon-btn theme-primary-text">toggle_on</i>
                        {% endif %}
                    {% endif %}
                </span>
            {% endif %}

            {% if page != "home" %}
                <a href="{{ url_for('main.home') }}">
                    <i class="material-icons-outlined icon-btn right">dashboard</i>
                </a>
            {% endif %}

            {% if access_group.can_access_user_settings == "True" or access_group.can_access_main_settings == "True" or access_group.can_edit_images == "True" %}
                <a id="settings-editor-open-btn" href="#"  data-target="settings-editor-sidenav" class="sidenav-trigger">
                    <i class="material-icons-outlined icon-btn right">settings</i>
                </a>
            {% endif %}

            {% if access_group.can_access_card_editor == "True"%}
                <a id="card-editor-open-btn" href="#"  data-target="card-editor-sidenav" class="sidenav-trigger">
                    <i class="material-icons-outlined icon-btn right">aspect_ratio</i>
                </a>
            {% endif %}

            {% if access_group.can_access_raw_config == "True"%}
                <a id="config-editor-open-btn" href="#"  data-target="config-editor-sidenav" class="sidenav-trigger">
                    <i class="material-icons-outlined icon-btn right">description</i>
                </a>
            {% endif %}

            {% if access_group.can_access_docs == "True" %}
                <a href="{{ url_for('docs_system.docs_home') }}">
                    <i class="material-icons-outlined icon-btn right">info</i>
                </a>
            {% endif %}

            {% if current_user.is_authenticated %}
                <a href="{{ url_for('user_system.logout') }}">
                    <i class="material-icons-outlined icon-btn right">exit_to_app</i>
                </a>
            {% else %}
                <a href="{{ url_for('user_system.login') }}">
                    <i class="material-icons-outlined icon-btn right">account_circle</i>
                </a>
            {% endif %}
        </div>
        <div class="divider"></div>

        {{ ActionBar(tags, location="sidenav") }}

        <div class="row">
            <div id="sidenav-cards-container"
                 data-url="{{ url_for('main.load_apps', sidenav="true") }}"
                 class="col s12">
                {{ SidenavApps(apps, tags) }}
            </div>
        </div>
    </div>
    <!-- END: SideNav-->

{% endblock sidenav%}

{% block modules %}
    <script>
        $( document ).ready(function() {
            load_card_editor();
            load_config_editor();
            load_settings_editor();
        });
    </script>
{% endblock modules %}

{% block footer %}
    <!-- 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 %}