{% 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" %}
<div
    class="organization-{{ organization_variant }}{% if organization_page.publisher_is_draft is True %} organization-{{ organization_variant }}--draft{% endif %}"
    property="{{ organization_property|default:'contributor' }}"
    typeof="CollegeOrUniversity"
>
{% if organization_variant == "row" %}
    <a href="{{ organization_page.get_absolute_url }}" title="{{ organization_page.get_title }}">
        <meta property="url" content="{{ SITE.web_url }}{{ organization_page.get_absolute_url }}"/>
        <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=""
                    property="logo"
                />
            {% endblockplugin %}
        </div>
        <div class="organization-{{ organization_variant }}__content">
            <div class="organization-{{ organization_variant }}__title" property="name">{{ organization_page.get_title }}</div>
            <div class="organization-{{ organization_variant }}__excerpt" property="description">{% 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 href="{{ organization_page.get_absolute_url }}" title="{{ organization_page.get_title }}">
        <meta property="url" content="{{ SITE.web_url }}{{ organization_page.get_absolute_url }}"/>
        <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=""
                    property="logo"
                />
            {% endblockplugin %}
        </div>
        <div class="organization-{{ organization_variant }}__content">
            <div class="organization-{{ organization_variant }}__title" property="name">{{ organization_page.get_title }}</div>
        </div>
    </a>
{% endif %}
</div>
{% endwith %}
