{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
{% load static mep_tags %}

{% block page-subtitle %}{{ member.firstname_last }} Cards · Library Members · {% endblock %}

{% block js %}
{% render_bundle 'activities' 'js' %}
{% endblock %}

{% block header %}
{% include 'snippets/header.html' with title=member.firstname_last style="detail" %}
{% endblock %}

{% block main-style %}tabbed white{% endblock %}

{% block content %}
{% include 'snippets/breadcrumbs.html' %}
<nav class="tabs" aria-label="sections">
    <li class="tab">
        <a href="{% url 'people:member-detail' slug=member.slug %}">biography</a>
    </li>
    <li class="tab">
        <a href="{% url 'people:borrowing-activities' slug=member.slug %}">activities</a>
    </li>
    <li class="tab" aria-selected="true">
        <span>cards</span>
    </li>
</nav>

<section class="member-cards">
    {% if cards %}
    <ol class="card-results">
    {% for card in cards %}
    <li class="card result">
        <a href="{% url 'people:member-card-detail' member.slug card.short_id %}">
                {# card thumbnails and year if known #}
                <picture>
                  {% with card.image|iiif_image:"size:width=225" as 1xthumbnail %}
                    <source srcset="{{ 1xthumbnail }}, {{ card.image|iiif_image:"size:width=450" }} 2x">
                    <img src="{{ 1xthumbnail }}" alt="" loading="lazy">
                  {% endwith %}
                </picture>
                {% with card.footnote_set.event_date_range as dates %}
                <div class="card-dates {% if card.footnote_set.exists and not dates %}unknown{% endif %}">
                    <span class="label">Card Years</span>
                    <span>{% if dates.0 %}{{ dates.0.year }}
                        {% if dates.0.year != dates.1.year %} – <span class="sr-only">to</span>{{ dates.1.year }}{% endif %}
                        {% elif card.footnote_set.exists %}
                        Unknown
                        {% endif %}
                    </span>
                </div>
                {% endwith %}
        </a>
    </li>
    {% endfor %}
    </ol>
    {% elif member.card %}
    {# show bibliographic citation if a member has a card but no images are available #}
    <div class="citation"><p>{{ member.card.bibliographic_note|urlize }}</p></div>
    {% else %}
    <div>No lending library cards available.</div>
    {% endif %}

    {% if member.card.notes %}
    <div class="notes">{{ member.card.notes|urlize }}</div>
    {% endif %}

    {% if cards.0.manifest %}
    {% include 'people/snippets/manifest_license.html' with manifest=cards.0.manifest %}
    {% endif %}

</section>
{% endblock %}