{% import "macros" as macros %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}{% endblock title %} ⋅ {{ "Plume" | _ }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="/static/css/main.css" />
        <link rel="stylesheet" href="/static/css/feather.css" />
        <link rel="manifest" href="/manifest.json" />
    </head>
    <body>
        <header>
            <nav id="menu">
                <a href="#" aria-label="{{ "Menu" | _ }}" title="{{ "Menu" | _ }}"><i class="icon icon-menu"></i></a>
            </nav>
            <div id="content">
                <nav>
                    <a href="/" class="title">{{ "Plume" | _ }}</a>
                    <hr/>
                    {% block header %}
                    {% endblock header %}
                </nav>
                <nav>
                    {% if account %}
                        <a href="/dashboard">
                            <i class="icon icon-home" aria-label="{{ "Dashboard" | _ }}"></i>
                            <span class="mobile-label">{{ "Dashboard" | _ }}</span>
                        </a>
                        <a href="/notifications">
                            <i class="icon icon-bell" aria-label="{{ "Notifications" | _ }}"></i>
                            <span class="mobile-label">{{ "Notifications" | _ }}</span>
                        </a>
                        <a href="/logout">
                            <i class="icon icon-log-out" aria-label="{{ "Log Out" | _ }}"></i>
                            <span class="mobile-label">{{ "Log Out" | _ }}</span>
                        </a>
                        <a href="/me" title="{{ "My account" | _ }}">
                            {{ macros::avatar(user=account) }}
                            <span class="mobile-label">{{ "My account" | _ }}</span>
                        </a>
                    {% else %}
                        <a href="/login">
                            <i class="icon icon-log-in"></i>
                            <span class="mobile-label">{{ "Log In" | _ }}</span>
                        </a>
                        <a href="/users/new">
                            <i class="icon icon-user-plus"></i>
                            <span class="mobile-label">{{ "Register" | _ }}</span>
                        </a>
                    {% endif %}
                </nav>
            </div>
        </header>
        <main>
            {% block content %}
            {% endblock content %}
        </main>
        <footer>
            <span>Plume 0.2.0</span>
            <a href="/about">{{ "About this instance" | _ }}</a>
            <a href="https://github.com/Plume-org/Plume">{{ "Source code" | _ }}</a>
            <a href="https://riot.im/app/#/room/#plume:disroot.org">{{ "Matrix room" | _ }}</a>
            {% if account %}
                {% if account.is_admin %}
                    <a href="/admin">{{ "Administration" | _ }}</a>
                {% endif %}
            {% endif %}
        </footer>
        <script src="/static/js/menu.js"></script>
    </body>
</html>
