{% load static i18n thumbnail aircox %}<!doctype html>
{% comment %}
Base website template. It displays various elements depending on context
variables.

Usefull context:
- cover: image cover
- site: current website
- model: view model or displayed `object`'s
{% endcomment %}
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="application-name" content="aircox" />
        <meta name="description" content="{{ site.description }}" />
        <meta name="keywords" content="{{ site.tags }}" />
        <meta name="generator" content="Aircox" />
        <link rel="icon" href="{% thumbnail site.favicon 32x32 crop %}" />

        {% block assets %}
        <link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-common.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "aircox/css/chunk-vendors.css" %}"/>
        <link rel="stylesheet" type="text/css" href="{% static "aircox/css/public.css" %}"/>
        <script src="{% static "aircox/js/chunk-common.js" %}"></script>
        <script src="{% static "aircox/js/chunk-vendors.js" %}"></script>
        <script src="{% static "aircox/js/public.js" %}"></script>
        {% endblock %}

        <title>
            {% block head_title %}
            {% if page and page.title %}{{ page.title }} &mdash; {{ station.name }}
            {% else %}{{ station.name }}
            {% endif %}
            {% endblock %}
        </title>

        {% block head_extra %}{% endblock %}
    </head>
    <body {% if request.is_mobile %}class="mobile"{% endif %}>
        <script id="init-script">
            window.addEventListener('load', function() {
                {% block init-scripts %}
                aircox.init(null, {hotReload:window})
                {% endblock %}
            })
        </script>
        <div id="app">
            <div class="navs">
                {% block nav %}
                <nav class="nav primary" role="navigation" aria-label="main navigation">
                    {% block primary-nav %}
                    <a class="nav-brand" href="{% url "home" %}">
                        <img src="{{ station.logo.url }}">
                    </a>
                    <a-switch class="button burger"
                        el=".nav.primary .nav-menu" group="nav"
                        aria-label="{% translate "Main menu" %}">
                    </a-switch>
                    <div class="nav-menu">
                        {% block primary-nav-menu %}
                        {% nav_items "top" css_class="nav-item" active_class="active" as items %}
                        {% for item, render in items %}
                        {{ render }}
                        {% endfor %}
                        {% if user.is_staff %}
                        <a class="nav-item" href="{% url "admin:index" %}" target="new">
                            {% translate "Admin" %}
                        </a>
                        {% endif %}
                        {% if user.is_authenticated %}
                        <a class="nav-item" href="{% url "logout" %}" title="{% translate "Disconnect" %}"
                            aria-label="{% translate "Disconnect" %}">
                            <i class="fa fa-power-off"></i>
                        </a>
                        {% endif %}
                        {% endblock %}
                    </div>
                    {% endblock %}
                </nav>

                {% block secondary-nav %}{% endblock %}
                {% endblock %}
            </div>

            {% block main-container %}
            <main class="page">
            {% block main %}
                {% spaceless %}
                {% block breadcrumbs-container %}
                <div class="breadcrumbs container">
                    {% block breadcrumbs %}{% endblock %}
                </div>
                {% endblock %}
                {% endspaceless %}

                {% block header-container %}
                {% if page or cover or title %}
                <header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
                    {% block header %}
                    <figure class="header-cover">
                        {% block header-cover %}
                        {% if cover %}
                        <img src="{{ cover }}" ref="cover" class="cover">
                        {% endif %}
                        {% endblock %}
                    </figure>
                    <div class="headings preview-card-headings">
                    {% block headings %}
                    <div>
                        {% block title-container %}
                        <h1 class="title is-1 {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
                        {% endblock %}
                    </div>
                    <div>
                        {% spaceless %}
                        <span class="subtitle is-2">
                        {% block subtitle %}
                        {% if subtitle %}
                            {{ subtitle }}
                        {% endif %}
                        {% endblock %}
                        </span>
                        {% endspaceless %}
                        </span>
                    </div>
                    {% endblock %}
                    </div>
                {% endblock %}
                </header>
                {% endif %}
                {% endblock %}

                {% block content-container %}
                {% if page and page.content %}
                <section class="container content page-content">
                    {% block content %}
                        {{ page.display_content|safe }}
                    {% endblock %}
                </section>
                {% endif %}
                {% endblock %}
            {% endblock %}
            </main>
            {% endblock %}

            {% block footer-container %}
            <footer class="page-footer">
                {% block footer %}
                {% comment %}
                {% nav_items "footer" css_class="nav-item" active_class="active" as items %}
                {% for item, render in items %}
                {{ render }}
                {% endfor %}
                {% endcomment %}

                {% if not request.user.is_authenticated %}
                <a class="nav-item" href="{% url "profile" %}" target="new"
                        title="{% translate "Profile" %}">
                    <span class="small icon">
                        <i class="fa fa-user"></i>
                    </span>
                </a>
                {% endif %}
                {% endblock %}

                {% if request.station and request.station.legal_label %}
                {{ request.station.legal_label }} &mdash;
                {% endif %}
            </footer>
            {% endblock %}

        </div>
        {% block player-container %}
        <div id="player">{% include "aircox/widgets/player.html" %}</div>
        {% endblock %}
    </body>
</html>
