{% import 'menu.jinja' as menu %}
<!doctype html>
<html lang="en">
    <head>
        {% block head %}
        <meta charset="utf-8">
        <meta name="viewpoint" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        {% assets "scss_all" %}
        <link rel="stylesheet" href="{{ ASSET_URL }}">
        {% endassets %}
        <title>
            {% block title %}Page Title{% endblock %}{% if self.subtitle() %} - {% block subtitle %}{% endblock %}{% else %} - {{ APP_NAME }}{% endif %}
        </title>
        {% endblock %}
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
        {% assets "js_all" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
        {% endassets %}
    </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 == menu.active_page %} active{% endif %}">
                            <span class="icon"><i class="fa {{ icon }}"></i></span>
                            <span class="name">{{ name }}</span>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="sidebar-content">
                        {% if self.sidebar() %}{% block sidebar %}{% endblock %}{% endif %}
                        {% if modules|length > 0 and jobs is defined and jobs|length > 0 %}
                        <div class="box sidebar-box">
                            <p class="field">
                                <a class="button" href="{{ modify_query(view='list') }}" title="List View">
                                    <span class="icon is-small">
                                        <i class="fa fa-list"></i>
                                    </span>
                                </a>
                                <a class="button" href="{{ modify_query(view='grid') }}" title="Grid View">
                                    <span class="icon is-small">
                                        <i class="fa fa-th"></i>
                                    </span>
                                </a>
                            </p>
                            <h2 class="subtitle is-4">Modules</h2>
                            <form action="{{ url_for('change_modules') }}" method="POST">
                            <input type="hidden" name="redirect" value="{{ request.url }}">
                            {% for module in modules %}
                            <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 module.is_enabled() %} checked{% endif %}>{{ module.name }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                            <input class="button is-primary" type="submit" value="Update">
                            </form>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </aside>
            <div class="column is-10">
                <nav class="nav has-shadow" id="top">
                    <div class="container">
                        <div class="nav-left">
                            <a class="nav-item" href="/">{{ APP_NAME }}</a>
                            <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="{{ query }}">
                                    </p>
                                    <p class="control">
                                    <a class="button is-dark" onclick="document.getElementById('searchform').submit()">
                                        &nbsp; <i class="fa fa-search"></i> &nbsp;
                                    </a>
                                    </p>
                                </div>
                            </form>
                        </div>
                        <span class="nav-toggle">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                        <div class="nav-right nav-menu is-hidden-tablet">
                            {% for href, id, name, icon in menu.content %}
                            <a href="{{ href|e }}" class="nav-item{% if id == menu.active_page %} is-active{% endif %}">{{ name }}</a>
                            {% endfor %}
                        </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 }}</div>
                    {% endfor %}
                    {% endif %}
                    {% endwith %}
                </section>
                {% if self.panels() %}
                {% block panels %}{% endblock %}
                {% endif %}
            </div>
        </div>
        <footer class="footer">
            {% block footer %}
            <div class="container">
                <div class="has-text-centered">
                    <p><strong>{{ APP_NAME }}</strong> by <a href="https://glotzerlab.engin.umich.edu">the Glotzer Group</a></p>
                    <p>part of the <a href="https://glotzerlab.engin.umich.edu/signac/">signac</a> data management framework</p>
                </div>
            </div>
            {% endblock %}
        </footer>
    </body>
</html>
