{% extends "richie/fullwidth.html" %}
{% load cms_tags extra_tags i18n pagination_tags 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 content %}{% spaceless %}
{% with category=current_page.category header_level=2 %}
{% if category %}
    <div class="category-detail">
        <div class="category-detail__block category-detail__block--unpadded">
            <div class="category-detail__row category-detail__row--unpadded">
                <div class="category-detail__banner">
                    {% get_placeholder_plugins "banner" as banner_plugins or %}
                        <div class="category-detail__empty">{% trans "Banner" %}</div>
                    {% endget_placeholder_plugins %}
                    {% blockplugin banner_plugins.0 %}
                        <img
                            src="{% thumbnail instance.picture 1140x400 crop upscale subject_location=instance.picture.subject_location %}"
                            srcset="
                                {% thumbnail instance.picture 1140x400 crop upscale subject_location=instance.picture.subject_location %} 1140w
                                {% if instance.picture.width >= 2280 %},{% thumbnail instance.picture 2280x800 crop upscale subject_location=instance.picture.subject_location %} 2280w{% endif %}
                                {% if instance.picture.width >= 3420 %},{% thumbnail instance.picture 3420x600 crop upscale subject_location=instance.picture.subject_location %} 3420w{% endif %}
                            "
                            sizes="1140px"
                            alt="{% if instance.picture.default_alt_text %}{{ instance.picture.default_alt_text }}{% else %}{% trans 'category banner' %}{% endif %}"
                        />
                    {% endblockplugin %}
                </div>

                <div class="category-detail__logo">
                    {% get_placeholder_plugins "logo" as logo_plugins or %}
                        <div class="category-detail__empty">{% trans "Logo" %}</div>
                    {% endget_placeholder_plugins %}
                    {% blockplugin logo_plugins.0 %}
                        <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 %}{% trans 'category logo' %}{% endif %}"
                        />
                    {% endblockplugin %}
                </div>
            </div>
        </div>

        <div class="category-detail__intro category-detail__block category-detail__block--unpadded">
            <div class="category-detail__row">
                <h1 class="category-detail__title">
                    {% get_placeholder_plugins "icon" as icon_plugins %}
                    {% blockplugin icon_plugins.0 %}
                        <img
                            src="{% thumbnail instance.picture 60x60 crop upscale subject_location=instance.picture.subject_location %}"
                            srcset="
                                {% thumbnail instance.picture 60x60 crop upscale subject_location=instance.picture.subject_location %} 60w
                                {% if instance.picture.width >= 120 %},{% thumbnail instance.picture 120x120 crop upscale subject_location=instance.picture.subject_location %} 80w{% endif %}
                                {% if instance.picture.width >= 180 %},{% thumbnail instance.picture 180x180 crop upscale subject_location=instance.picture.subject_location %} 120w{% endif %}
                            "
                            sizes="60px"
                            alt=""
                        />
                    {% endblockplugin %}

                    {% render_model current_page "title" %}
                </h1>

                <div class="category-detail__description">
                    {% placeholder "description" %}
                </div>
            </div>
        </div>

        {% with children_categories=category.get_children_categories %}
            {% if children_categories %}
                <div class="category-detail__courses category-detail__block">
                    <div class="category-detail__row">
                        <section class="category-glimpse-list">
                            <h2 class="category-detail__title">{% trans "Sub categories" %}</h2>
                            {% for child_category in children_categories %}
                                {% include "courses/cms/fragment_category_glimpse.html" with category=child_category category_variant="glimpse" %}
                            {% endfor %}
                        </section>
                    </div>
                </div>
            {% endif %}
        {% endwith %}

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

        {% with organizations=category.get_organizations %}
            {% if organizations %}
                {% autopaginate organizations GLIMPSE_PAGINATION_ORGANIZATIONS %}
                <div id="page{{ page_suffix }}" class="category-detail__organizations category-detail__block">
                    <div class="category-detail__row">
                        <section class="organization-glimpse-list">
                            <h2 class="category-detail__title">{% trans "Related organizations" %}</h2>
                            {% for organization in page_obj.object_list %}
                                {% include "courses/cms/fragment_organization_glimpse.html" %}
                            {% endfor %}
                            {% if paginator.num_pages > 1 %}
                                {% paginate using "richie/pagination.html" %}
                            {% endif %}
                        </section>
                    </div>
                </div>
            {% endif %}
        {% endwith %}

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

        {% with persons=category.get_persons %}
            {% if persons %}
                {% autopaginate persons GLIMPSE_PAGINATION_PERSONS %}
                <div id="page{{ page_suffix }}" class="category-detail__persons category-detail__block category-detail__block--lightest">
                    <div class="category-detail__row">
                        <section class="person-glimpse-list">
                            <h2 class="category-detail__title">{% trans "Related persons" %}</h2>
                            {% for person in page_obj.object_list %}
                                {% include "courses/cms/fragment_person_glimpse.html" %}
                            {% 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="category" %}
{% endif %}
{% endwith %}
{% endspaceless %}{% endblock content %}
