{% load account_tags %}
<style>
    .member-results {
        counter-reset: results {{ page_obj.start_index|add:'-1' }};
    }
</style>
<ol class="member-results" start="{{ page_obj.start_index|add:'-1' }}">
    {% for member in members %}
    <li class="members result{% if member.has_card %} has-card{% endif %}">
        <a href="{% url 'people:member-detail' slug=member.slug %}" aria-label="{{ member.sort_name.0 }}">
            <div class="container">
                {# counter for search results #}
                <span class="counter"></span>
                {# indicator for SRs if person has card (icon) #}
                {% if member.has_card %}
                <span class="sr-only">Member has card</span>
                {% endif %}
                {# member details #}
                <dl class="member">
                    <div class="primary">
                        {# name #}
                        <dt class="name">Name</dt>
                        <dd class="name">{{ member.sort_name.0 }}</dd>
                        {# 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 %}
                    </div>
                    <div class="secondary">
                        {# membership dates #}
                        <dt class="member-dates">Membership Years</dt>
                        <dd class="member-dates">
                            {{ member.account_years|as_ranges|default:'-' }}
                        </dd>
                        {# search result relevance (if user is logged in) #}
                        {% if user.is_authenticated and member.score %}
                        <dt class="relevance">Relevance</dt>
                        <dd class="relevance">
                            <span class="score">{{ member.score|floatformat }}</span>
                            <progress max="200" value="{{ member.score }}">
                                {{ member.score }}
                            </progress>
                        </dd>
                        {% endif %}
                    </div>
                </dl>
                {# link to view detail page #}
                <span class="see-more">
                    See more details
                </span>
            </div>
        </a>
    </li>
    {% endfor %}
</ol>
{% if not members %}
{% include 'common/empty_results.html' %}
{% endif %}