{%- import 'menu.jinja' as menu -%}
{%- import 'pagination.jinja' as paginator -%}
<!doctype html>
<html lang="en">
    <head>
        {% block head %}
        <meta charset="utf-8">
        <meta name="viewpoint" content="width=device-width,initial-scale=1">
        {%- assets "scss_all" %}
        <link rel="stylesheet" href="{{ ASSET_URL }}">
        {%- endassets %}
        <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
        <link rel="apple-touch-icon" href="{{ url_for('static', filename='images/favicon.png') }}">
        <meta name="apple-mobile-web-app-title" content="{{ APP_NAME }}">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width">
        <meta name="viewport" content="initial-scale=1.0">
        <title>
            {% if self.title() %}{% block title %}Page Title{% endblock %} - {% endif %}{% if self.subtitle() %}{% block subtitle %}{% endblock %}{% else %}{{ APP_NAME }}{% endif %}
        </title>
        {% endblock %}
        {%- assets "jquery" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
        {% endassets %}
        {%- assets "js_all" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
        {% endassets %}
        <!-- Module assets -->
        {%- for assetfile in module_assets %}
        {%- if assetfile.url.endswith('css') %}
        <link rel="stylesheet" href="{{ assetfile.url }}">
        {%- else %}
        <script type="text/javascript" src="{{ assetfile.url }}"></script>
        {%- endif %}
        {%- endfor %}
    </head>
    <body>
        <div class="columns">
            <aside class="column is-2 aside hero is-fullheight is-hidden-mobile">
                <div>
                    <div class="menu">
                        {% for href, id, name, icon in menu.content %}
                        <a href="{{ href | e }}" class="item{% if id == g.active_page %} active{% endif %}">
                            <span class="icon"><i class="{{ icon }}"></i></span>
                            <span class="name">{{ name }}</span>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="sidebar-content">
                        {% if self.sidebar() %}
                        {% block sidebar %}
                        {% block view_options %}
                        <div class="box sidebar-box">
                            <h2 class="subtitle is-4">Views</h2>
                            <p class="field">
                                <a class="button" href="{{ modify_query(view='list') }}" title="List View">
                                    <span class="icon is-small">
                                        <i class="fas fa-list-ul"></i>
                                    </span>
                                </a>
                                <a class="button" href="{{ modify_query(view='grid') }}" title="Grid View">
                                    <span class="icon is-small">
                                        <i class="fas fa-th"></i>
                                    </span>
                                </a>
                            </p>
                        </div>
                        {% endblock view_options %}
                        {% block module_selector %}
                        {% set context = {"jobs": "JobContext", "project": "ProjectContext"}[g.active_page] %}
                        <div class="box sidebar-box">
                            <h2 class="subtitle is-4">Modules</h2>
                        {% if modules_by_context[context] | length > 0 %}
                            {% if g.active_page == "jobs" and g.jobs | length > 0  or g.active_page == "project" %}
                            <form action="{{ url_for('change_modules') }}" method="POST">
                                <input type="hidden" name="redirect" value="{{ request.url }}">
                                {% for module in modules_by_context[context] %}
                                <div class="field is-horizontal">
                                    <div class="field-body">
                                        <div class="field">
                                            <div class="control">
                                                <label class="checkbox">
                                                    <input type="checkbox" name="modules[{{ loop.index0 }}]"
                                                       {%- if loop.index0 in enabled_module_indices[context] %} checked{% endif -%}
                                                    > {{ module.name }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                                <input class="button is-primary" type="submit" value="Update">
                            </form>
                            {% endif %} {# if g.active_page... #}

                        {% else %} {# modules_by_context[context] | length <= 0 #}
                        <a href="https://docs.signac.io/projects/dashboard/en/latest/api.html#dashboard-modules">
                            No modules. Add some!
                        </a>
                        {% endif %} {# that checks number of enabled modules #}
                        </div>
                        {% endblock module_selector %}
                    </div> <!-- end sidebar -->
                    {% endblock sidebar %}
                    {% endif %} {# if self.modules() #}
                </div>
            </aside>
            <div class="column is-10">
                <nav class="navbar is-light" role="navigation" aria-label="main navigation" id="top">
                    <div class="navbar-brand">
                        <div class="navbar-item">
                            {{ APP_NAME }}
                        </div>
                        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
                            <span aria-hidden="true"></span>
                            <span aria-hidden="true"></span>
                            <span aria-hidden="true"></span>
                        </a>
                    </div>
                    <div class="navbar-menu is-justify-content-space-between" id="dashboard-menu">
                        <div class="navbar-start">
                            {% block searchbar %}
                            <div class="navbar-item">
                                <form action="{{ url_for('search') }}" method="GET" id="searchform">
                                    <div class="field has-addons searchbox">
                                        <p class="control">
                                            <input name="q" class="input" type="text" placeholder="Search jobs" value="{{ g.query }}" size="60">
                                        </p>
                                        <p class="control">
                                            <a class="button is-dark" onclick="document.getElementById('searchform').submit()">
                                                &nbsp; <i class="fas fa-search"></i> &nbsp;
                                            </a>
                                        </p>
                                    </div>
                                </form>
                            </div>
                            {% endblock searchbar %}
                        </div> <!--end navbar start -->
                            {% for href, id, name, icon in menu.content %}
                            <a href="{{ href | e }}" class="navbar-item is-hidden-tablet{% if id == g.active_page %} is-active{% endif %}">
                                {{ name }}
                            </a>
                            {% endfor %}
                            {% if self.view_options() %}
                            <div class="navbar-item is-hidden-tablet">
                                {{ self.view_options() }}
                            </div>
                            {% endif %}
                            {% if self.module_selector() %}
                            <div class="navbar-item is-hidden-tablet">
                                {{ self.module_selector() }}
                            </div>
                            {% endif %}

                        <div class="navbar-end">
                          <div class="navbar-item">
                            {% block logout_link %}
                            <a href="{{ url_for('logout') }}" class="item">
                              <span class="icon"><i class="fas fa-sign-out-alt"></i></span>
                              <span class="name">Log out</span>
                            </a>
                            {% endblock logout_link %}
                          </div>
                        </div>
                    </div>
                </nav>
                <section class="page-heading">
                    {% if self.title() %}
                    <h1 class="title">
                        {{ self.title() }}
                    </h1>
                    {% endif %}
                    {% if self.subtitle() %}
                    <h2 class="subtitle">
                        {{ self.subtitle() }}
                    </h2>
                    {% endif %}
                    {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                    {% for category, message in messages %}
                    <div class="notification is-{{ category }}">{{ message | safe }}</div>
                    {% endfor %}
                    {% endif %}
                    {% endwith %}
                </section>
                {% if g.pagination is defined %}
                {{ paginator.render_pagination(g.pagination) | safe }}
                {% endif %}
                {% if self.panels() %}
                {% block panels %}{% endblock %}
                {% endif %}
                {% if g.pagination is defined %}
                {{ paginator.render_pagination(g.pagination) | safe }}
                {% endif %}
            </div>
        </div>
        <footer class="footer">
            {% block footer %}
            <div class="container">
                <div class="has-text-centered">
                    <p><strong>{{ APP_NAME }} {{ APP_VERSION }}</strong> by <a href="https://glotzerlab.engin.umich.edu">the Glotzer Group</a></p>
                    <p>part of the <a href="https://signac.io/"><strong>signac</strong></a> data management framework</p>
                    <p>
                        <a href="https://docs.signac.io/projects/dashboard/en/latest/">documentation</a> |
                        <a href="https://github.com/glotzerlab/signac-dashboard/">source</a> |
                        <a href="https://github.com/glotzerlab/signac-dashboard/blob/main/LICENSE.txt">license</a>
                    </p>
                </div>
            </div>
            {% endblock %}
        </footer>
    </body>
</html>
