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

{% block meta_opengraph_type %}
    <meta property="og:type" content="article">
{% endblock meta_opengraph_type %}


{% block meta_opengraph_contextuals %}
    <meta property="og:title" content="{{ current_page.get_title|truncatechars:65 }}">
    <meta property="og:url" content="{{ SITE.web_url }}{{ current_page.get_absolute_url }}">
    <meta property="article:published_time" content="{{ current_page.publication_date|date:"c" }}">
{% endblock meta_opengraph_contextuals %}


{% 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 %}
{% 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 %}


<div class="blogpost-detail">

    <div class="blogpost-detail__row">

        <div class="blogpost-detail__subhead">
            {% 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 %}

            <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>

            {% 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 %}
        </div>

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

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

        <div class="blogpost-detail__grid">
            <div class="blogpost-detail__grid-main">

                <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>

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

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

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

                <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>
            </div>
        </div>
    </div>

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