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

{% block page-subtitle %}{{ member.firstname_last }} Borrowing Activity · 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" aria-selected="true">
        <a href="{% url 'people:membership-activities' slug=member.slug %}">activities</a>
    </li>
    <li class="tab">
        <a href="{% url 'people:member-card-list' slug=member.slug %}">cards</a>
    </li>
</nav>

<nav class="tabs subsection" aria-label="Activities">
    <li class="tab" aria-selected="true">
        <a href="{% url 'people:borrowing-activities' slug=member.slug %}">Borrowing</a>
    </li>
    <li class="tab">
        <a href="{% url 'people:membership-activities' slug=member.slug %}">Membership</a>
    </li>
</nav>

<div class="activities">
    {% comment %} preliminary form controls for sorting and expand/collapse on mobile
    <form id="activity-mobile-control">
        <label class="sort">
            <span>SORTED BY</span>
            <select>
                <option value="1">Type</option>
                <option value="2">Category</option>
                <option value="3">Duration</option>
                <option value="4" selected="selected">Start Date</option>
                <option value="5">End Date</option>
                <option value="6">Amount</option>
            </select>
            <img class="dropdown icon" src="{% static 'img/icons/chevron_down.png' %}" alt="">
        </label>
        <button id="expand">Expand all</button>
    </form>
    {% endcomment %}

    {% if not event_list.count %}
    <p>No documented borrowing activity.</p>
    {% else %}
    <div class="wrapper">
    <table id="activity-table" class="borrowing">
        <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>Publication Date</th>
                <th>Activity</th>
                <th data-sort-default>Start Date</th>
                <th>End Date</th>
            </tr>
        </thead>
        {% for event in event_list %}
        {% with event.event_label as event_label %}
        <tr class="{{ event_label|lower }}{% if event.work.is_uncertain %} uncertain{% endif %}">
            <td class="title{% if not event.work.title %} empty{% endif %}">
                <a href="{{ event.work.get_absolute_url }}">
                    {{ event.work.title|default:'-' }}
                </a>
                {% if event.edition %}
                <div class="edition">
                    {{ event.edition.display_html }}
                </div>
                {% endif %}
                {% if event.work.is_uncertain %}
                <span class="sr-only">
                    {{ event.work.UNCERTAINTY_MESSAGE }}
                </span>
                {% endif %}
            </td>
            <td class="author{% if not event.work.author_list %} empty{% endif %}"
                data-sort="{{ event.work.sort_author_list|default:'' }}">
                {{ event.work.author_list|default:'-' }}
            </td>
            <td class="pubdate{% if not event.work.year %} empty{% endif %}">
                {{ event.work.year|default:'-' }}
            </td>
            <td class="activity{% if event_label == 'Generic' %} empty{% endif %}">
                {% if event_label == 'Generic' %} -
                {% else %}{{ event_label }}{% endif %}
            </td>
            <td class="start{% if not event.partial_start_date %} empty{% endif %}"
                data-sort="{{ event.partial_start_date|default:'' }}">
                {{ event.partial_start_date|partialdate|default:'-' }}
            </td>
            <td class="end{% if not event.partial_end_date %} empty{% endif %}"
                data-sort="{{ event.partial_end_date|default:'' }}">
                {{ event.partial_end_date|partialdate|default:'-' }}
            </td>
        </tr>
        {% endwith %}
        {% endfor %}
    </table>
    </div>
    {% endif %}
</div>
{% endblock %}