<!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/main.css" />
        <link rel="stylesheet" href="/static/fontawesome-5.0.10/css/fontawesome-all.min.css" />
    </head>
    <body>
        <header>
            <nav id="menu">
                <a href="#" aria-label="{{ "Menu" | _ }}" title="{{ "Menu" | _ }}"></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="fa fa-home" aria-label="{{ "Dashboard" | _ }}"></i>
                            <span class="mobile-label">{{ "Dashboard" | _ }}</span>
                        </a>
                        <a href="/notifications">
                            <i class="fa fa-bell" aria-label="{{ "Notifications" | _ }}"></i>
                            <span class="mobile-label">{{ "Notifications" | _ }}</span>
                        </a>
                        <a href="/logout">
                            <i class="fa fa-sign-out-alt aria-label="{{ "Log Out" | _ }}"></i>
                            <span class="mobile-label">{{ "Log Out" | _ }}</span>
                        </a>
                        <a href="/me">
                            <img class="avatar small" src="{{ account.avatar }}" alt="{{ "My account" | _ }}">
                            <span class="mobile-label">{{ "My account" | _ }}</span>
                        </a>
                    {% else %}
                        <a href="/login">{{ "Log In" | _ }}</a>
                        <a href="/users/new">{{ "Register" | _ }}</a>
                    {% endif %}
                </nav>
            </div>
        </header>
        <main>
            {% block content %}
            {% endblock content %}
        </main>
        <footer>
            <span>Plume 0.1.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>
    </body>
</html>
