{% extends "richie/fullwidth.html" %}
{% load static category_tags cms_tags extra_tags i18n thumbnail %}

{% block meta_rdfa_context %}
    <meta property="og:type" content="article" />
    <meta property="og:article:published_time" content="{{ current_page.publication_date|date:"c" }}">
    <meta property="og:article:modified_time" content="{{ current_page.changed_date|date:"c" }}">

    {% get_placeholder_plugins "cover" as plugins %}
    {% blockplugin plugins.0 %}
        {% thumbnail instance.picture 845x500 crop upscale subject_location=instance.picture.subject_location as thumb %}
        <meta property="og:image" content="{{ MEDIA_URL_PREFIX }}{{ thumb.url }}" />
        <meta property="og:image:width" content="{{ thumb.width }}" />
        <meta property="og:image:height" content="{{ thumb.height }}" />
    {% endblockplugin %}
{% endblock meta_rdfa_context %}

{% block body_rdfa %} vocab="https://schema.org/" typeof="Article"{% endblock body_rdfa %}

{% block subheader_content %}
    <div class="subheader__container">
        <h1 class="subheader__title">{% page_attribute "page_title" request.current_page.parent_page %}</h1>
    </div>
{% endblock subheader_content %}

{% block content %}
    {% spaceless %}

    {% block related_categories %}
        {% get_related_category_pages request.current_page.parent_page.get_child_pages as categories %}
        {% if categories %}
        <div class="category-tag-list category-tag-list--primary">
            <div class="category-tag-list__container">
                {% for category in categories %}
                    {% include "courses/cms/fragment_category_glimpse.html" with category_variant="tag" %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
    {% endblock related_categories %}

    <div class="blogpost-detail">

        <div class="blogpost-detail__row">

            {% block subhead %}
                <div class="blogpost-detail__subhead">
                    {% block categories %}
                        {% with category_variant="tag" %}
                            {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"categories" %}
                            <div class="blogpost-detail__theme">
                                {% placeholder "categories" current_page or %}
                                    <span class="blogpost-detail__empty">{% trans 'No categories yet.' %}</span>
                                {% endplaceholder %}
                            </div>
                            {% endif %}
                        {% endwith %}
                    {% endblock categories %}

                    {% block publication_date %}
                        <p class="blogpost-detail__pubdate">
                            {% if current_page.publication_date %}
                                {{ current_page.publication_date|date:"SHORT_DATE_FORMAT" }}
                            {% else %}
                                {% trans 'Not published yet' %}
                            {% endif %}
                        </p>
                    {% endblock publication_date %}

                    {% block authors %}
                        {% with person_variant="tag" %}
                            {% if current_page.publisher_is_draft %}
                            <div class="blogpost-detail__authors">
                                {% placeholder "author" or %}
                                    <span class="blogpost-detail__empty">{% trans 'No author yet' %}</span>
                                {% endplaceholder %}
                            </div>
                            {% endif %}
                        {% endwith %}
                    {% endblock authors %}
                </div>
            {% endblock subhead %}

            {% block title %}
                <h1 class="blogpost-detail__title">{% render_model current_page "title" %}</h1>
            {% endblock title %}

            {% block social_networks %}
                {% include "social-networks/blogpost-badges.html" with page_title=request.current_page.get_title page_url=request.current_page.get_absolute_url %}
            {% endblock social_networks %}

            <div class="blogpost-detail__grid">
                {% block grid_main %}
                    <div class="blogpost-detail__grid-main">

                        {% block cover %}
                            <div class="blogpost-detail__cover">
                                {% get_placeholder_plugins "cover" as plugins or %}
                                    <p class="blogpost-detail__empty">{% trans "Cover" %}</p>
                                {% endget_placeholder_plugins %}
                                {% blockplugin plugins.0 %}
                                    <img
                                        src="{% thumbnail instance.picture 845x500 subject_location=instance.picture.subject_location %}"
                                        srcset="
                                            {% thumbnail instance.picture 845x500 subject_location=instance.picture.subject_location %} 500w
                                            {% if instance.picture.width >= 1000 %},{% thumbnail instance.picture 1000x1000 subject_location=instance.picture.subject_location %} 1000w{% endif %}
                                            {% if instance.picture.width >= 2000 %},{% thumbnail instance.picture 2000x2000 subject_location=instance.picture.subject_location %} 2000w{% endif %}
                                        "
                                        sizes="500px"
                                        alt="{% if instance.picture.default_alt_text %}{{ instance.picture.default_alt_text }}{% else %}{% trans 'blog post cover image' %}{% endif %}"
                                    />
                                {% endblockplugin %}
                            </div>
                        {% endblock cover %}

                        {% block excerpt %}
                            <div class="blogpost-detail__excerpt">
                                {% placeholder "excerpt" or %}
                                    <p class="blogpost-detail__empty">
                                        {% trans "No excerpt content" %}
                                    </p>
                                {% endplaceholder %}
                            </div>
                        {% endblock excerpt %}

                        {% block body %}
                            <div class="blogpost-detail__body">
                                {% placeholder "body" or %}
                                    <p class="blogpost-detail__empty">
                                        {% trans "No body content" %}
                                    </p>
                                {% endplaceholder %}
                            </div>
                        {% endblock body %}
                    </div>
                {% endblock grid_main %}

                {% block grid_aside %}
                    <div class="blogpost-detail__grid-aside">
                        {% block headline %}
                            <div class="blogpost-detail__headline">
                                {% static_placeholder "static_blogpost_headline" %}
                                {% placeholder "headline" %}
                            </div>
                        {% endblock headline %}

                        {% block related_blogposts %}
                            <div class="blogpost-glimpse-list">
                                <p class="blogpost-glimpse-list__title"><span>{% trans 'Related posts' %}</span></p>
                                {% for related_blogpost in current_page.blogpost.get_related_blogposts|slice:":3" %}
                                    {% include "courses/cms/fragment_blogpost_glimpse.html" with blogpost=related_blogpost blogpost_variant="mini" %}
                                {% endfor %}
                            </div>
                        {% endblock related_blogposts %}
                    </div>
                {% endblock grid_aside %}
            </div>
        </div>

    </div>
    {% endspaceless %}
{% endblock content %}
