{% extends 'html.twig' %}

{% set master_title = (header_title is defined ? (header_title ~ ' // ') : '') ~ 'flash.moe' %}

{% block master_head %}
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="{{ globals.assetsInfo.get('makai.css') }}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Electrolize&family=Hachi+Maru+Pop&family=Victor+Mono:ital,wght@0,100..700;1,100..700&family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet">
{% endblock %}

{% set master_body_attrs = master_body_attrs|default([])|merge({
    'class': html_classes({
        'index': header_is_index is defined,
        'fullscreen-header': header_full is defined,
        'now-playing': header_now_playing is defined,
        'header-minimal': header_minimal is defined
    }),
}) %}

{% block master_body %}
    <div class="header">
        <div class="header-background">
            <img src="{{ random(globals.siteInfo.headerImages) }}" alt="">
        </div>
        <div class="header-foreground" {% if header_offset is defined and header_offset > 0 %}style="padding-bottom: {{ header_offset }}px"{% endif %}>
            <a class="header-logo" href="/">
                <div class="header-flash">{{ header_logo_flash|default('flash') }}</div>
                <div class="header-wave">{{ header_logo_wave|default('wave') }}</div>
            </a>
            <div class="header-right">
                <div class="header-now-playing header-now-playing-hidden">
                    <div class="header-now-playing-icon" title="Now listening to...">
                        <a href="/now-listening"><div class="fmi fmi-music"></div></a>
                    </div>
                    <div class="header-now-playing-cover">
                        <img src="//now.flash.moe/resources/no-cover.png" alt="">
                    </div>
                    <div class="header-now-playing-details">
                        <div class="header-now-playing-title"><a href="#" target="_blank" rel="noopener"></a></div>
                        <div class="header-now-playing-artist"><a href="#" target="_blank" rel="noopener"></a></div>
                    </div>
                </div>
                <div class="header-menu">
                    {% for link in globals.siteInfo.headerNavigation %}
                        <a href="{{ link.link }}">{{ link.title }}</a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        {% block container %}{% endblock %}
    </div>
    <div class="footer">
        <div class="footer-text">&copy; flashwave {{ footer_copy_start|default('2010') }}-{{ footer_copy_end|default(('now'|date('Y'))) }} - {{ random(globals.siteInfo.footerQuotes) }}</div>
    </div>
    <script src="{{ globals.assetsInfo.get('makai.js') }}"></script>
{% endblock %}