{% extends "orga/base.html" %}
{% load compress %}
{% load i18n %}
{% load static %}

{% block extra_title %}{{ page_obj.paginator.count }} {% blocktranslate trimmed count count=page_obj.paginator.count %}speaker{% plural %}speakers{% endblocktranslate %} :: {% endblock extra_title %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static "common/js/lightbox.js" %}"></script>
    {% endcompress %}
{% endblock scripts %}
{% block stylesheets %}
    {% compress css %}
        <link rel="stylesheet" type="text/css" href="{% static "common/css/dialog.css" %}">
    {% endcompress %}
{% endblock stylesheets %}

{% block content %}
    <h2>
        {{ page_obj.paginator.count }}
        {% blocktranslate trimmed count count=page_obj.paginator.count %}
            speaker
        {% plural %}
            speakers
        {% endblocktranslate %}
    </h2>

    {% include "common/includes/search_form.html" %}

    <div class="table-responsive-md">
        <table class="table table-sm table-hover table-flip table-sticky">
            <thead>
                <tr>
                    <th>
                        {% translate "Name" %}
                        <a href="{% querystring sort="name" %}"><i class="fa fa-caret-down" title="{% translate "Sort (a-z)" %}"></i></a>
                        <a href="{% querystring sort="-name" %}"><i class="fa fa-caret-up" title="{% translate "Sort (z-a)" %}"></i></a>
                    </th>
                    <th>
                        {% translate "Email" %}
                        <a href="{% querystring sort="email" %}"><i class="fa fa-caret-down" title="{% translate "Sort (a-z)" %}"></i></a>
                        <a href="{% querystring sort="-email" %}"><i class="fa fa-caret-up" title="{% translate "Sort (z-a)" %}"></i></a>
                    </th>
                    <th class="numeric">
                        {% translate "Accepted Proposals" %}
                        <a href="{% querystring sort="-accepted_submission_count" %}"><i class="fa fa-caret-down" title="{% translate "Sort (high-low)" %}"></i></a>
                        <a href="{% querystring sort="accepted_submission_count" %}"><i class="fa fa-caret-up" title="{% translate "Sort (low-high)" %}"></i></a>
                    </th>
                    <th class="numeric">
                        {% translate "Proposals" %}
                        <a href="{% querystring sort="-submission_count" %}"><i class="fa fa-caret-down" title="{% translate "Sort (high-low)" %}"></i></a>
                        <a href="{% querystring sort="submission_count" %}"><i class="fa fa-caret-up" title="{% translate "Sort (low-high)" %}"></i></a>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for speaker in speakers %}
                    <tr>
                        <td>{% include "orga/includes/user_name.html" with user=speaker lightbox=True %}</td>
                        <td><a href="mailto:{{ speaker.email }}">{{ speaker.email }}</a></td>
                        <td class="numeric">{{ speaker.accepted_submission_count }}</td>
                        <td class="numeric">{{ speaker.submission_count }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% include "orga/includes/pagination.html" %}

{% endblock content %}
