{% load i18n cms_tags extra_tags static thumbnail %}{% spaceless %}
{% comment %}Obviously, the context template variable "person" is required and must be a Person page extension{% endcomment %}
{% with person_page=person.extended_object %}
<div class="person-glimpse" property="{{ person_property|default:'author' }}" typeof="Person">
    {% comment %}Use tabindex and aria-hidden on the image link as it is entirely redundant with the title link{% endcomment %}
    <meta property="url" content="{{ SITE.web_url }}{{ person_page.get_absolute_url }}" />
    <meta property="name" content="{{ person_page.get_title }}" />
    <a
      class="person-glimpse__media"
      href="{{ person_page.get_absolute_url }}"
      tabindex="-1"
      aria-hidden="true"
      property="url"
    >
        {% get_page_plugins "portrait" person_page as plugins or %}
            <img src="{% static "richie/images/empty/person_portrait.png" %}"
                 class="person-glimpse__media__empty"
                 alt="">
        {% endget_page_plugins %}
        {% blockplugin 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=""
                property="image"
            />
        {% endblockplugin %}
    </a>
    <div class="person-glimpse__content">
        <div class="person-glimpse__wrapper">
            <a href="{{ person_page.get_absolute_url }}">
                <h{{ header_level|default:2 }} class="person-glimpse__title">
                    {{ person_page.get_title }}
                </h{{ header_level|default:2 }}>
            </a>
            <div class="person-glimpse__categories">
                <div class="category-tag-list category-tag-list--primary">
                    {% with category_variant="tag" %}
                        {% show_placeholder "categories" person_page %}
                    {% endwith %}
                </div>
            </div>
            <div class="person-glimpse__bio" property="description">{% if instance.bio %}{{ instance.bio }}{% else %}{% show_placeholder "bio" person_page %}{% endif %}</div>
        </div>
    </div>
</div>
{% endwith %}
{% endspaceless %}
