{% extends "texsiteserene/base.html" %}

{% load i18n %}
{% load static %}
{% load texsitecore_tags %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}

{% block head-css %}
    {{ block.super }}

    <link rel="stylesheet" href="{% static "vendor/highlightjs/default.min.css" %}" type="text/css">
{% endblock %}

{% block head-extension %}
    {{ block.super }}

    {% if page.header_image %}
        {% image page.header_image width-1920 as keyvisual %}
        <link rel="preload" as="image" href="{{ keyvisual.url }}">
    {% endif %}
{% endblock %}

{% block clean-blog-body-content %}
    {% if page.header_image %}
        {% image page.header_image width-1920 as keyvisual %}
        <header class="intro-header" style="background-image: url('{{ keyvisual.url }}')">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                        <div class="{% if page.is_site_root %}site{% else %}post{% endif %}-heading">
                            <h1>{{ page.title }}</h1>
                            {% if page.is_site_root %}
                                <hr class="small">
                                {% if page.subtitle %}
                                    <h2 class="subheading">{{ page.subtitle }}</h2>
                                {% endif %}
                            {% else %}
                                {% if page.subtitle %}
                                    <h2 class="subheading">{{ page.subtitle }}</h2>
                                {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </header>
    {% else %}
        <header class="serene-heading-band">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                        <h1>{{ page.title }}</h1>
                        {% if page.subtitle %}
                            <h2 class="subheading">{{ page.subtitle }}</h2>
                        {% endif %}
                    </div>
                </div>
            </div>
        </header>
    {% endif %}

    <article>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    {% for block in page.body %}
                        {% get_block_template block.block_type as block_template %}
                        {% include block_template with value=block.value %}
                    {% endfor %}

                    <div id="navigator" style="display:none">
                        {% include "texsiteserene/includes/navigator.html" with page=page only %}
                    </div>
                </div>
            </div>
        </div>
    </article>
{% endblock %}

{% block body-javascript %}
    {{ block.super }}

    <script src="{% static "vendor/highlightjs/highlight.min.js" %}" defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            hljs.highlightAll()
            prepareCodeCopyButtons()

            if (sessionStorage.getItem("navigate")) {
                sessionStorage.removeItem("navigate")
                var nav = document.getElementById("navigator")
                if (nav) {
                    nav.style.display = ""
                    nav.addEventListener("click", function (e) {
                        var a = e.target.closest("[data-navigate]")
                        if (a) sessionStorage.setItem("navigate", "true")
                    })
                }
            }
        })
    </script>
{% endblock %}