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

{% block page-subtitle %}{{ member.firstname_last }} Membership 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">
        <a href="{% url 'people:borrowing-activities' slug=member.slug %}">Borrowing</a>
    </li>
    <li class="tab" aria-selected="true">
        <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 membership activity.</p>
    {% else %}
    <div class="wrapper">
    <table id="activity-table" class="membership">
        <thead>
            <tr>
                <th>Activity</th>
                <th data-sort-method="none">Plan
                    <a class="info-link" href="/about/faq/#lending-library-plans"
                        title="{{ plan_tooltip }}" tabindex="0"
                        id="plan-tip"></a>
                </th>
                <th data-sort-method="number">Duration</th>
                <th data-sort-default>Start Date</th>
                <th>End Date</th>
                <th data-sort-method="number">Amount</th>
            </tr>
        </thead>
        {% for event in event_list %}
        {% with event.event_type as event_type %}
        <tr class="{{ event_type|lower }}">
            <td class="activity">{{ event_type }}</td>
            <td class="plan{% if not event.subscription.category %} empty{% endif %}">
                {{ event.subscription.category|default:'-' }}
                {# render info link here so it can be shown on mobile too #}
                {% if forloop.first %}
                <a class="info-link" href="/about/faq#joining-the-library"
                    title="{{ plan_tooltip }}" tabindex="0"
                    id="plan-tip-2"></a>
                {% endif %}
            </td>
            <td class="duration{% if not event.subscription.duration %} empty{% endif %}"
                data-sort="{{ event.subscription.duration|default:0 }}">
                {{ event.subscription.readable_duration|default:'-' }}
            </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:'' }}">
                {% if event.reimbursement %} - {% else %}
                {{ event.partial_end_date|partialdate|default:'-' }}{% endif %}
            </td>
            {# amount is either subscription price + deposit or refund amount; refund is negative #}
            {% with subscription_amount=event.subscription.total_amount refund=event.reimbursement.refund %}
            <td class="amount" data-sort="{% if refund %}-{% endif %}{% firstof subscription_amount refund 0 %}">
                {# only display currency if there is a value #}
                {% if refund %}-{% endif %}
                {% firstof subscription_amount|floatformat refund|floatformat '-' %}
                {% if subscription_amount or refund %}
                    {% firstof event.subscription.currency_symbol event.reimbursement.currency_symbol '' %}
                {% endif %}
            {% endwith %}
            </td>
        </tr>
        {% endwith %}
        {% endfor %}
    </table>
    </div>
    {% endif %}
</div>
{% endblock %}