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

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

{% block js %}
<script src="{% static 'js/d3.v5.min.js' %}" nonce="{{ request.csp_nonce }}"></script>
{% endblock %}

{# if including map, render leaflet css here, so it can be overridden #}
{% if addresses %}
{% block vendorcss %}
{% render_bundle 'memberMap' 'css' %}
{% endblock %}
{% endif %}

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

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

{% block content %}
{# breadcrumbs & tabs #}
{% include 'snippets/breadcrumbs.html' %}
<nav class="tabs" aria-label="tabs">
    <li class="tab" aria-selected="true">
        <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">
        <a href="{% url 'people:member-card-list' slug=member.slug %}">cards</a>
    </li>
</nav>

{% with account_start=member.account_set.first.earliest_date account_end=member.account_set.first.last_date %}

{# biography section #}
<section aria-label="biography">
    <dl class="member">
        <div class="primary">
            {# name #}
            <dt class="name">Name</dt>
            <dd class="name">{{ member.name }}</dd>
            {# membership dates #}
            <dt class="member-dates">Membership Years</dt>
            <dd class="member-dates">
                {{ account_years|as_ranges|default:'-' }}
            </dd>
            {# public notes #}
            {% if member.public_notes %}
            <dt class="notes">Notes</dt>
            <dd class="notes">{{ member.public_notes|markdownify }}</dd>
            {% endif %}
        </div>
        <div class="secondary">
            {# birth/death dates #}
            {% if member.birth_year or member.death_year %}
            <dt class="birth-death">Birth – Death</dt>
            <dd class="birth-death">
            {% if member.birth_year %}
            {{ member.birth_year }}{% endif %} – {% if member.death_year %}<span class="sr-only">to</span>{{ member.death_year }}
            {% endif %}
            </dd>
            {% endif %}
            {# nationality #}
            {% if member.nationalities.exists %}
            <dt class="nationality">Nationality</dt>
            {% for country in member.nationalities.all %}
            <dd class="nationality">{{ country.name }}</dd>
            {% endfor %}
            {% endif %}
            {# profession #}
            {% if member.profession %}
            <dt class="profession">Profession</dt>
            <dd>{{ member.profession.name }}</dd>
            {% endif %}
            {# reference #}
            {% if member.viaf or member.urls.exists %}
            <dt class="reference">Reference</dt>
            {% if member.viaf %}
            <dd class="reference">
                <a href="{{ member.viaf.uri }}">VIAF</a>
            </dd>
            {% endif %}
            {% if member.urls.exists %}
            {% for reference in member.urls.all %}
            <dd class="reference">
                <a href="{{ reference }}">{{ reference.url|domain|capfirst }}</a>
            </dd>
            {% endfor %}
            {% endif %}
            {% endif %}
        </div>
    </dl>
</section>

{# membership timeline graph(s) #}
{% if account_start %}
<section aria-label="timeline">
    <div class="header">
        <hr/>
        <h2>Membership Timeline</h2>
    </div>
    <div class="timeline">
        <p class="description" id="member-timeline-desc">Member timeline showing activity
            {% if account_end and account_start != account_end %}
            from {{ account_start.year }} to {{ account_end.year }}{% else %}
            for {{ account_start.year }}{% endif %}.
        See the activities tab for more details.</p>
    </div>
    {% include 'people/snippets/member_graph.html' %}
</section>
{% endif %}

{% endwith %}

{# address map #}
{% if addresses %}
<section aria-label="map">
    <div class="header">
        <hr/>
        <h2>Addresses</h2>
    </div>
    <div id="address-map"></div>
    {% include 'people/snippets/member_map.html' %}
</section>
{% endif %}

{% endblock %}