{% load i18n cms_tags extra_tags thumbnail %}
{% comment %}Obviously, the context template variable "blogpost" is required and must be a BlogPost page extension{% endcomment %}

{% with blogpost_page=blogpost.extended_object blogpost_variant=blogpost_variant|default:"glimpse" %}
{% if blogpost_variant == "favorite" %}
    <div class="blogpost-{{ blogpost_variant }}{% if blogpost_page.publisher_is_draft %} blogpost-{{ blogpost_variant }}--draft{% endif %}">
        <div class="blogpost-{{ blogpost_variant }}__media">
            {% get_page_plugins "cover" blogpost_page as plugins or %}
                <div class="blogpost-{{ blogpost_variant }}__empty">{% trans 'Cover' %}</div>
            {% endget_page_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="">
            {% endblockplugin %}
        </div>
        <div class="blogpost-{{ blogpost_variant }}__content">
            <div class="blogpost-{{ blogpost_variant }}__wrapper">
                <h{{ header_level|default:2 }} class="blogpost-{{ blogpost_variant }}__title">{{ blogpost_page.get_title }}</h{{ header_level|default:2 }}>

                <p class="blogpost-{{ blogpost_variant }}__excerpt">
                    {% show_placeholder "excerpt" blogpost_page %}
                </p>

                <a href="{{ blogpost.extended_object.get_absolute_url }}" class="blogpost-{{ blogpost_variant }}__cta">
                    {% trans 'Learn more' %}
                </a>
            </div>
        </div>
    </div>
{% elif blogpost_variant == "mini" %}
    <a href="{{ blogpost_page.get_absolute_url }}" class="blogpost-{{ blogpost_variant }}{% if blogpost_page.publisher_is_draft %} blogpost-{{ blogpost_variant }}--draft{% endif %}">
        <div class="blogpost-{{ blogpost_variant }}__media">
            {% get_page_plugins "cover" blogpost_page as plugins or %}
                <div class="blogpost-{{ blogpost_variant }}__empty">{% trans 'Cover' %}</div>
            {% endget_page_plugins %}
            {% blockplugin plugins.0 %}
                <img src="{% thumbnail instance.picture 150x85 crop upscale subject_location=instance.picture.subject_location %}"
                    srcset="
                    {% thumbnail instance.picture 150x85 crop upscale subject_location=instance.picture.subject_location %} 150w
                    {% if instance.picture.width >= 300 %},{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %} 300w{% endif %}
                    {% if instance.picture.width >= 450 %},{% thumbnail instance.picture 450x255 crop upscale subject_location=instance.picture.subject_location %} 450w{% endif %}
                    "
                    sizes="150px"
                    alt=""
                />
            {% endblockplugin %}
        </div>
        <div class="blogpost-{{ blogpost_variant }}__content">
            <div class="blogpost-{{ blogpost_variant }}__wrapper">
                <div class="blogpost-{{ blogpost_variant }}__categories">
                    {% with category_variant="tag" has_link=False %}
                        {% show_placeholder "categories" blogpost_page %}
                    {% endwith %}
                </div>
                <p class="blogpost-{{ blogpost_variant }}__title">{{ blogpost_page.get_title }}</p>
            </div>
        </div>
    </a>
{% else %}
    <a href="{{ blogpost.extended_object.get_absolute_url }}"
        class="blogpost-{{ blogpost_variant }}{% if blogpost_page.publisher_is_draft %} blogpost-{{ blogpost_variant }}--draft{% endif %}">
        {% if blogpost_page.publication_date %}
        <p class="blogpost-{{ blogpost_variant }}__date">
            {{ blogpost_page.publication_date|date:"DATE_FORMAT" }}
        </p>
        {% endif %}
        <div class="blogpost-{{ blogpost_variant }}__media">
            {% get_page_plugins "cover" blogpost_page as plugins or %}
                <div class="blogpost-{{ blogpost_variant }}__empty">{% trans 'Cover' %}</div>
            {% endget_page_plugins %}

            {% blockplugin plugins.0 %}
            <img src="{% thumbnail instance.picture 300x170 crop upscale subject_location=instance.picture.subject_location %}"
                srcset="{% thumbnail instance.picture 800x480 crop upscale subject_location=instance.picture.subject_location %} 300w
                {% if instance.picture.width >= 1600 %},{% thumbnail instance.picture 1600x960 crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                {% if instance.picture.width >= 2400 %},{% thumbnail instance.picture 2400x1440 crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}"
                sizes="300px"
                alt="">
            {% endblockplugin %}
        </div>
        <div class="blogpost-{{ blogpost_variant }}__content">
            <div class="blogpost-{{ blogpost_variant }}__wrapper">
                <div class="blogpost-{{ blogpost_variant }}__categories">
                    {% with category_variant="tag" has_link=False %}
                        {% show_placeholder "categories" blogpost_page %}
                    {% endwith %}
                </div>

                <p class="blogpost-{{ blogpost_variant }}__title">{{ blogpost_page.get_title }}</p>

                <p class="blogpost-{{ blogpost_variant }}__excerpt">
                    {% show_placeholder "excerpt" blogpost_page %}
                </p>
            </div>
        </div>
    </a>
{% endif %}

{% endwith %}
