{% 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_placeholder_plugins "cover" blogpost_page as plugins or %}
                <div class="blogpost-{{ blogpost_variant }}__empty">{% trans 'Cover' %}</div>
            {% endget_placeholder_plugins %}

            {% blockplugin plugins.0 %}
            <img
                src="{% thumbnail instance.picture 845x500 replace_alpha='#FFFFFF' subject_location=instance.picture.subject_location %}"
                srcset="{% thumbnail instance.picture 845x500 replace_alpha='#FFFFFF' subject_location=instance.picture.subject_location %} 500w
                    {% if instance.picture.width >= 1000 %},{% thumbnail instance.picture 1000x1000 replace_alpha='#FFFFFF' subject_location=instance.picture.subject_location %} 1000w{% endif %}
                    {% if instance.picture.width >= 2000 %},{% thumbnail instance.picture 2000x2000 replace_alpha='#FFFFFF' 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" %}
    <div class="blogpost-{{ blogpost_variant }}{% if blogpost_page.publisher_is_draft %} blogpost-{{ blogpost_variant }}--draft{% endif %}">
        <div class="blogpost-{{ blogpost_variant }}__media" aria-hidden="true">
            <a href="{{ blogpost_page.get_absolute_url }}" tabindex="-1">
                {% get_placeholder_plugins "cover" blogpost_page as plugins or %}
                    <div class="blogpost-{{ blogpost_variant }}__empty">{% trans 'Cover' %}</div>
                {% endget_placeholder_plugins %}
                {% blockplugin plugins.0 %}
                    <img src="{% thumbnail instance.picture 150x85 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %}"
                        srcset="
                        {% thumbnail instance.picture 150x85 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 150w
                        {% if instance.picture.width >= 300 %},{% thumbnail instance.picture 300x170 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 300w{% endif %}
                        {% if instance.picture.width >= 450 %},{% thumbnail instance.picture 450x255 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 450w{% endif %}
                        "
                        sizes="150px"
                        alt=""
                    />
                {% endblockplugin %}
            </a>
        </div>
        <div class="blogpost-{{ blogpost_variant }}__content">
            <div class="blogpost-{{ blogpost_variant }}__wrapper">
                <h{{ header_level|default:3 }} class="blogpost-{{ blogpost_variant }}__title">
                    <a href="{{ blogpost.extended_object.get_absolute_url }}" class="blogpost-{{ blogpost_variant }}__link">
                        {{ blogpost_page.get_title }}
                    </a>
                </h{{ header_level|default:3 }}>

                <div class="blogpost-{{ blogpost_variant }}__categories">
                    {% with category_variant="tag" has_link=False %}
                        <p class="offscreen">{% trans "Categories" %}</p>
                        {% show_placeholder "categories" blogpost_page %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="blogpost-{{ blogpost_variant }}{% if blogpost_page.publisher_is_draft %} blogpost-{{ blogpost_variant }}--draft{% endif %}">
        {% comment %} sighted users see the date above the cover image, not announced to screen readers{% endcomment %}
        {% if blogpost_page.publication_date %}
        <p class="blogpost-{{ blogpost_variant }}__date" aria-hidden="true">
            {{ blogpost_page.publication_date|date:"DATE_FORMAT" }}
        </p>
        {% endif %}
        <div class="blogpost-{{ blogpost_variant }}__media" aria-hidden="true">
            <a href="{{ blogpost_page.get_absolute_url }}" tabindex="-1">
                {% get_placeholder_plugins "cover" blogpost_page as plugins or %}
                    <div class="blogpost-{{ blogpost_variant }}__empty">{% trans 'Cover' %}</div>
                {% endget_placeholder_plugins %}

                {% blockplugin plugins.0 %}
                <img src="{% thumbnail instance.picture 300x170 crop replace_alpha='#FFFFFF' upscale subject_location=instance.picture.subject_location %}"
                    srcset="{% thumbnail instance.picture 800x480 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 300w
                    {% if instance.picture.width >= 1600 %},{% thumbnail instance.picture 1600x960 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                    {% if instance.picture.width >= 2400 %},{% thumbnail instance.picture 2400x1440 replace_alpha='#FFFFFF' crop upscale subject_location=instance.picture.subject_location %} 900w{% endif %}"
                    sizes="300px"
                    alt="">
                {% endblockplugin %}
            </a>
        </div>
        <div class="blogpost-{{ blogpost_variant }}__content">
            <div class="blogpost-{{ blogpost_variant }}__wrapper">
                <h{{ header_level|default:3 }} class="blogpost-{{ blogpost_variant }}__title">
                    <a href="{{ blogpost.extended_object.get_absolute_url }}" class="blogpost-{{ blogpost_variant }}__link">
                        {{ blogpost_page.get_title }}
                    </a>
                </h{{ header_level|default:3 }}>

                {% comment %}screen reader users get the date here, right after the title{% endcomment %}
                {% if blogpost_page.publication_date %}
                <p class="offscreen" data-testid="offscreen-date">
                    {{ blogpost_page.publication_date|date:"DATE_FORMAT" }}
                </p>
                {% endif %}

                <div class="blogpost-{{ blogpost_variant }}__categories">
                    <p class="offscreen">{% trans "Categories" %}</p>
                    {% with category_variant="tag" has_link=False %}
                        {% show_placeholder "categories" blogpost_page %}
                    {% endwith %}
                </div>

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

{% endwith %}
