{% 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
- sidebar_object_list: item to display in sidebar
- sidebar_url_name: url name sidebar item complete list
- sidebar_url_parent: parent page for sidebar items complete list
{% endcomment %}
{% load static i18n thumbnail aircox %}

<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" %}"/>
        <script src="{% static "aircox/js/chunk-common.js" %}"></script>
        <script src="{% static "aircox/js/chunk-vendors.js" %}"></script>
        <script src="{% static "aircox/js/core.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>
        <script id="init-script">
            window.addEventListener('load', function() {
                {% block init-scripts %}
                aircox.init(null, {hotReload:window})
                {% endblock %}
            })
        </script>
        <div id="app">
            <nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
                <div class="container">
                    <div class="navbar-brand">
                        <a href="/" title="{% translate "Home" %}" class="navbar-item">
                            <img src="{{ station.logo.url }}" class="logo"/>
                        </a>
                    </div>
                    <div class="navbar-menu">
                        <div class="navbar-start">
                            {% block top-nav %}
                            {% nav_items "top" css_class="navbar-item" active_class="is-active" as items %}
                            {% for item, render in items %}
                            {{ render }}
                            {% endfor %}
                            {% endblock %}
                        </div>
                        <div class="navbar-end">
                            {% block top-nav-tools %}
                            {% endblock %}
                            {% block top-nav-end %}
                            <div class="navbar-item">
                                <form action="{% url 'page-list' %}" method="GET">
                                    <div class="control has-icons-left">
                                        <span class="icon is-small is-left">
                                            <i class="fa fa-search"></i>
                                        </span>
                                        <input type="text" name="q" class="input"
                                            placeholder="{% translate "Search" %}" />
                                    </div>
                                </form>
                            </div>
                            {% endblock %}
                        </div>
                    </div>
                </div>
            </nav>

            <div class="container">
                <div class="columns is-desktop">
                    <main class="column page">
                        <header class="header">
                            {% block header %}
                            <h1 class="title is-1">
                                {% block title %}
                                {% if page and page.title %}
                                {{ page.title }}
                                {% endif %}
                                {% endblock %}
                            </h1>

                            <h3 class="subtitle is-3">
                                {% block subtitle %}{% endblock %}
                            </h3>

                            <div class="columns is-size-4">
                            {% block header_nav %}
                            <span class="column">
                                {% block header_crumbs %}
                                {% if parent %}
                                <a href="{{ parent.get_absolute_url }}">
                                     {{ parent.title }}</a></li>
                                {% endif %}
                                {% endblock %}
                            </span>
                            {% endblock %}
                            </div>
                            {% endblock %}
                        </header>

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

                    {% if has_sidebar %}
                    {% comment %}Translators: main sidebar {% endcomment %}
                    <aside class="column is-one-third-desktop">
                        {# FIXME: block cover into sidebar one #}
                        {% block cover %}
                        {% if page and page.cover %}
                        <img class="cover mb-4" src="{{ page.cover.url }}" class="cover"/>
                        {% endif %}
                        {% endblock %}

                        {% with is_thin=True %}
                        {% block sidebar %}
                        {% if sidebar_object_list %}
                        {% with object_list=sidebar_object_list %}
                        {% with list_url=sidebar_list_url %}
                        {% with has_headline=False %}
                        <section>
                            <h4 class="title is-4">
                                {% block sidebar_title %}{% translate "Recently" %}{% endblock %}
                            </h4>
                            {% include "aircox/widgets/page_list.html" %}
                        {% endwith %}
                        {% endwith %}
                        {% endwith %}
                        {% endif %}
                        </section>
                        {% endblock %}
                        {% endwith %}
                    </aside>
                    {% endif %}
                </div>
            </div>

            <hr>
        </div>
        <div id="player">{% include "aircox/widgets/player.html" %}</div>
    </body>
</html>
