{% load i18n cms_tags extra_tags static thumbnail %}
{% comment %}Obviously, the context template variable "organization" is required and must be an Organization page extension{% endcomment %}

{% with organization_page=organization.extended_object organization_variant=organization_variant|default:"glimpse" %}
{% if organization_variant == "row" %}
    <a class="organization-{{ organization_variant }}{% if organization_page.publisher_is_draft is True %} organization-{{ organization_variant }}--draft{% endif %}" href="{{ organization_page.get_absolute_url }}" title="{{ organization_page.get_title }}">
        <div class="organization-{{ organization_variant }}__logo">
            {% get_page_plugins "logo" organization_page as plugins or %}
                <img src="{% static "richie/images/empty/organization_logo.png" %}"
                     class="organization-{{ organization_variant }}__logo--empty"
                     alt="">
            {% endget_page_plugins %}
            {% blockplugin plugins.0 %}
                <img src="{% thumbnail instance.picture 200x113 upscale subject_location=instance.picture.subject_location %}"
                    srcset="
                        {% thumbnail instance.picture 200x113 upscale subject_location=instance.picture.subject_location %} 200w
                        {% if instance.picture.width >= 400 %},{% thumbnail instance.picture 400x225 upscale subject_location=instance.picture.subject_location %} 400w{% endif %}
                        {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x338 upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                        {% if instance.picture.width >= 800 %},{% thumbnail instance.picture 800x450 upscale subject_location=instance.picture.subject_location %} 800w{% endif %}
                    "
                    sizes="(min-width: 576px) 50vw, (min-width: 1200px) 25vw, 100vw"
                    alt=""
                />
            {% endblockplugin %}
        </div>
        <div class="organization-{{ organization_variant }}__content">
            <div class="organization-{{ organization_variant }}__title">
                {{ organization_page.get_title }}
            </div>
            <div class="organization-{{ organization_variant }}__excerpt">
                {% get_page_plugins "description" organization_page as plugins or %}
                    {% trans "Description" %}
                {% endget_page_plugins %}
                {% blockplugin plugins.0 %}
                    {{ instance.body|truncatewords_html:40|safe }}
                {% endblockplugin %}
            </div>
        </div>
    </a>
{% else %}
    <a class="organization-{{ organization_variant }}{% if organization_page.publisher_is_draft is True %} organization-{{ organization_variant }}--draft{% endif %}" href="{{ organization_page.get_absolute_url }}" title="{{ organization_page.get_title }}">
        <div class="organization-{{ organization_variant }}__logo">
            {% get_page_plugins "logo" organization_page as plugins or %}
                <img src="{% static "richie/images/empty/organization_logo.png" %}"
                     class="organization-{{ organization_variant }}__logo--empty"
                     alt="">
            {% endget_page_plugins %}
            {% blockplugin plugins.0 %}
                <img src="{% thumbnail instance.picture 200x113 upscale subject_location=instance.picture.subject_location %}"
                    srcset="
                        {% thumbnail instance.picture 200x113 upscale subject_location=instance.picture.subject_location %} 200w
                        {% if instance.picture.width >= 400 %},{% thumbnail instance.picture 400x225 upscale subject_location=instance.picture.subject_location %} 400w{% endif %}
                        {% if instance.picture.width >= 600 %},{% thumbnail instance.picture 600x338 upscale subject_location=instance.picture.subject_location %} 600w{% endif %}
                        {% if instance.picture.width >= 800 %},{% thumbnail instance.picture 800x450 upscale subject_location=instance.picture.subject_location %} 800w{% endif %}
                    "
                    sizes="(min-width: 576px) 50vw, (min-width: 1200px) 25vw, 100vw"
                    alt=""
                />
            {% endblockplugin %}
        </div>
        <div class="organization-{{ organization_variant }}__content">
            <div class="organization-{{ organization_variant }}__title">
                {{ organization_page.get_title }}
            </div>
        </div>
    </a>
{% endif %}
{% endwith %}
