{% extends 'main/layout.html' %}

{% block title %}{{ page.title }} — {{ blog_user.blog_title }}{% endblock %}

{% block meta_description %}{{ page.body|truncatewords:16 }}{% endblock %}

{% block head_rsl_license %}
{% include 'partials/rsl_license_head.html' %}
{% endblock head_rsl_license %}

{% block head_extra %}
<style>

    /* Light theme */
    @media (prefers-color-scheme: light) {
    {{ light_css|safe }}
    }

    /* Dark theme */
    @media (prefers-color-scheme: dark) {
    {{ dark_css|safe }}
    }
</style>
{% endblock head_extra %}

{% block content %}
<main>
    {% if blog_user.blog_title %}
    <a href="{% url 'index' %}" class="pages-item-brand">{{ blog_user.blog_title }}</a>
    {% endif %}

    <h1 class="pages-item-title">{{ page.title }}</h1>

    {% if request.user.is_authenticated and request.subdomain == user.username %}
    <div class="pages-item-byline">
        Last updated on <time datetime="{{ page.updated_at|date:'Y-m-d' }}">{{ page.updated_at|date:'F j, Y' }}</time>
        | <a href="{% url 'page_update' page.slug %}">Edit page</a>
        | <a href="{% url 'page_delete' page.slug %}">Delete page</a>
    </div>
    {% endif %}

    <div class="pages-item-body">
        {{ page.body_as_html|safe }}
    </div>
</main>

{% include 'partials/webring.html' %}

{% include 'partials/footer_blog.html' %}

{% endblock content %}

{% block scripts %}
{% if not blog_user.comments_on %}
<script>
    window.addEventListener('keypress', function (evt) {
        if (evt.key === 'u') {
            document.location.assign('/pages');
        } else if (evt.key === 'e') {
            let url = document.location.pathname + 'edit';
            document.location.assign(url);
        }
    });
</script>
{% endif %}
{% endblock scripts %}