{% load wagtailcore_tags wagtailimages_tags %}

{% image author.image fill-100x100 as image %}
<div class="author">
    <span class="u-sr-only">,</span>
    <div class="author__container">
        <div class="author__avatar">
            <img class="author__image" src="{{ image.url }}" alt="{{ image.alt }}" loading="lazy" aria-hidden="true">
        </div>
        <div class="author__details">
            <span class="u-sr-only">Author information:</span>
            {% if author.person_page %}
                <a class="author__name" href="{% pageurl author.person_page %}">
                    {{ author.name }}
                    <span class="u-sr-only">,</span>
                </a>
            {% else %}
                <span class="author__name">
                    {{ author.name }}
                    <span class="u-sr-only">,</span>
                </span>
            {% endif %}

            <span class="author__meta">
                {% if author.role %}
                    <span class="author__role">{{ author.role }}</span>
                    <span class="u-sr-only">,</span>
                {% endif %}
                <span class="u-sr-only">Post information:</span>
                {% if item.date %}
                    <time class="author__date" datetime="{{ item.date|date:'Y-m-d' }}">{{ item.date }}</time>
                    <span class="u-sr-only">,</span>
                {% endif %}

                {% if item.read_time %}
                    <span class="author__readtime">{{ item.read_time }} min read</span>
                    <span class="u-sr-only">,</span>
                {% endif %}
            </span>
            {% if tag_link_base %}
                <div class="author__tags">
                    <span class="u-sr-only">Related post categories:</span>
                    {% for tag in item.related_services.all %}
                        {% include "patterns/atoms/tag/tag.html" with item=tag small=True tag_link_base=tag_link_base %}
                        <span class="u-sr-only">,</span>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>