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

{% 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 }}">
{% endblock meta_opengraph_contextuals %}



{% block subheader %}
<div class="subheader subheader--alternative">
    {% block breadcrumbs %}
    {% include "menu/breadcrumbs.html" %}
    {% endblock breadcrumbs %}

    {% block subheader_content %}{% spaceless %}
        {% with person=current_page.person header_level=2 %}
            {% if person %}
            <div class="subheader__container">
                <div class="subheader__intro">
                    <div class="subheader__main">
                        <h1 class="subheader__title">{% render_model current_page "title" %}</h1>

                        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"categories" %}
                        <div class="category-badge-list category-badge-list--tertiary">
                            <div class="category-badge-list__container">
                            {% with category_variant="badge" %}
                                {% placeholder "categories" or %}
                                    <span class="category-badge-list__empty">
                                        {% trans "No associated categories" %}
                                    </span>
                                {% endplaceholder %}
                            {% endwith %}
                            </div>
                        </div>
                        {% endif %}

                        <div class="subheader__content">
                            {% placeholder "bio" or %}
                                <p class="subheader__empty">{% trans "Enter your bio here..." %}</p>
                            {% endplaceholder %}
                        </div>
                    </div>

                    <div class="subheader__aside">
                        <div class="subheader__cartouche">
                            {% get_placeholder_plugins "portrait" as plugins or %}
                            <div class="subheader__media subheader__media--locket subheader__empty">
                                <img src="{% static "richie/images/empty/person_portrait.png" %}"
                                        class="subheader__empty--avatar"
                                        alt="">
                            </div>
                            {% endget_placeholder_plugins %}
                            {% blockplugin plugins.0 %}
                            <div class="subheader__media subheader__media--locket">
                                <img
                                    src="{% thumbnail instance.picture 200x200 crop upscale subject_location=instance.picture.subject_location %}"
                                    srcset="
                                        {% thumbnail instance.picture 200x200 crop upscale subject_location=instance.picture.subject_location %} 200w
                                        {% if instance.picture.width >= 400 %},{% thumbnail instance.picture 400x400 crop upscale subject_location=instance.picture.subject_location %} 400w{% endif %}
                                        {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x600 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                                    "
                                    sizes="200px"
                                    alt="{% if instance.picture.default_alt_text %}{{ instance.picture.default_alt_text }}{% else %}{% blocktrans with title=current_page.get_title %}{{ title }} avatar{% endblocktrans %}{% endif %}"
                                />
                            </div>
                            {% endblockplugin %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endwith %}
    {% endspaceless %}{% endblock subheader_content %}
</div>
{% endblock subheader %}

{% block content %}{% spaceless %}

{% with person=current_page.person header_level=2 %}
    {% if person %}
    <div class="person-detail">
        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"maincontent" %}
        <div class="person-detail__maincontent person-detail__block">
            <div class="person-detail__row">
                {% placeholder "maincontent" %}
            </div>
        </div>
        {% endif %}

        {% if current_page.publisher_is_draft or not current_page|is_empty_placeholder:"organizations" %}
        <div class="person-detail__organizations person-detail__block person-detail__block--gradient-neutral person-detail__block--arc">
            <div class="person-detail__row">
                <section class="organization-glimpse-list">
                    <h2 class="person-detail__title">{% trans "Organizations" %}</h2>
                    {% placeholder "organizations" or %}
                        <p class="organization-glimpse-list__empty">
                            {% trans "No associated organizations" %}
                        </p>
                    {% endplaceholder %}
                </section>
            </div>
        </div>
        {% endif %}

        {% with courses=person.get_courses %}
            {% if courses %}
                {% autopaginate courses GLIMPSE_PAGINATION_COURSES %}
                <div id="page{{ page_suffix }}" class="person-detail__courses person-detail__block">
                    <div class="person-detail__row">
                        <section class="course-glimpse-list">
                            <h2 class="person-detail__title">{% trans "Courses" %}</h2>
                            {% for course in page_obj.object_list %}
                                {% include "courses/cms/fragment_course_glimpse.html" with course=course %}
                            {% endfor %}
                            {% if paginator.num_pages > 1 %}
                                {% paginate using "richie/pagination.html" %}
                                <div class="button-caesura">
                                    <a href="{% page_url 'courses' %}?persons={{ person.extended_object_id }}" class="person-detail__see-more">
                                    {% blocktrans with person_title=person.extended_object.get_title %}
                                        See all courses related to {{ person_title }}
                                    {% endblocktrans %}
                                    </a>
                                </div>
                            {% endif %}
                        </section>
                    </div>
                </div>
            {% endif %}
        {% endwith %}

        {% with blogposts=person.get_blogposts|order_by:"-extended_object__publication_date" %}
            {% if blogposts %}
                {% autopaginate blogposts GLIMPSE_PAGINATION_BLOGPOSTS %}
                <div id="page{{ page_suffix }}" class="person-detail__blogposts person-detail__block person-detail__block--divider">
                    <div class="person-detail__row">
                        <section class="blogpost-glimpse-list">
                            <h2 class="person-detail__title">{% trans "Blogposts" %}</h2>
                            {% for blogpost in page_obj.object_list %}
                                {% include "courses/cms/fragment_blogpost_glimpse.html" with blogpost=blogpost %}
                            {% endfor %}
                            {% if paginator.num_pages > 1 %}
                                {% paginate using "richie/pagination.html" %}
                            {% endif %}
                        </section>
                    </div>
                </div>
            {% endif %}
        {% endwith %}
    </div>
    {% else %}
        {% include "courses/cms/fragment_error_detail_template_banner.html" with model="person" %}
    {% endif %}
{% endwith %}
{% endspaceless %}{% endblock content %}
