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

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

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

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

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

{% block content %}
{% include 'snippets/breadcrumbs.html' %}

<div class="card-image-viewer">
    <div class="viewer">
        {% if card_page.has_previous %}
        <a class="prev" rel="prev" aria-label="previous card"
           href="{% url 'people:member-card-detail' member.slug prev_card_id %}"></a>
        {% else %}
        <span class="prev"></span>
        {% endif %}
        <a href="#zoom" aria-label="view larger image">
        <picture data-counter="{{ card_page.number }} / {{ card_page.paginator.num_pages }}">
        {% with card.image|iiif_image:"size:width=430" as 1xthumbnail %}
            <source srcset="{{ 1xthumbnail }}, {{ card.image|iiif_image:"size:width=860" }} 2x">
            <img src="{{ 1xthumbnail }}" alt="{{ member.firstname_last }} {{ label }} card" aria-describedby="card-counter">
        {% endwith %}
        </picture>
        </a>
        {% if card_page.has_next %}
        <a class="next" rel="next" aria-label="next card"
           href="{% url 'people:member-card-detail' member.slug next_card_id %}"></a>
        {% else %}
        <span class="next"></span>
        {% endif %}
    </div>

    <div id="zoom">
        <a href="#">
            <picture>
            {% with card.image|iiif_image:"size:width=!1024,height=1024" as 1xzoom %}
                <source srcset="{{ card.image|iiif_image:"size:width=!568,height=568" }}, {{ card.image|iiif_image:"size:width=!1136,height=1136" }} 2x">
                <sourcesrcset="{{ 1xzoom }}, {{ card.image|iiif_image:"size:width=!2048,height=2048" }} 2x"  media="(min-width: 768px)">
                <img src="{{ 1xzoom}}" alt="{{ member.firstname_last }} {{ label }} card (large view)" aria-describedby="card-counter" loading="lazy">
            {% endwith %}
            </picture>
        </a>
    </div>

    <div class="card nav container">
        <div class="wrapper"> {% spaceless %}
            <nav class="cards" aria-label="cards">
                <ol>
                    {% for canvas in cards.all %}
                    <li class="card{% if canvas == card %} active{% endif %}">
                    <a href="{% url 'people:member-card-detail' member.slug canvas.short_id %}">
                    <picture>
                    {% with canvas.image|iiif_image:"size:width=105" as 1xthumbnail %}
                        <source srcset="{{ 1xthumbnail }}, {{ canvas.image|iiif_image:"size:width=215" }} 2x">
                        <img src="{{ 1xthumbnail }}" alt="{{ member.firstname_last }} card {{ forloop.counter }}" loading="lazy">
                    {% endwith %}
                    </picture>
                    </a>
                    </li>
                    {% endfor %}
                </ol>
            </nav>
        </div> {% endspaceless %}
    </div>

    {% include 'people/snippets/manifest_license.html' with manifest=card.manifest %}

    {% if events %}
    <div class="activities">
    <div class="wrapper">
    <table class="card-events">
        <thead>
            <tr>
                <th>Start Date</th>
                <th class="title">Title</th>
                <th>Activity</th>
                <th>End Date</th>
            </tr>
        </thead>
        {% for event in events %}
        <tr id="e{{ event.pk }}" class="{{ event.event_type|lower }}">
            <td class="start{% if not event.partial_start_date %} empty{% endif %}">
                {{ event.partial_start_date|partialdate|default:'-' }}
            </td>
            <td class="title{% if not event.work.title %} empty{% endif %}">
                {% if event.work.title %}
                <a href="{{ event.work.get_absolute_url }}">
                {{ event.work.title }}</a>
                {% else %}-{% endif %}
            </td>
            {% with event.event_label as event_label %}
            <td class="activity{% if event_label == 'Generic' %} empty{% endif %}">
                {% if event_label == 'Generic' %} -
                {% else %}{{ event_label }}{% endif %}
            </td>
            {% endwith %}
            <td class="end{% if not event.partial_end_date %} empty{% endif %}">
                {{ event.partial_end_date|partialdate|default:'-' }}
            </td>
        </tr>
        {% endfor %}
    </table>
    </div>
    </div>
    {% endif %}

</div>
{% endblock %}