{% extends 'events/management/base.html' %}
{% from 'message_box.html' import message_box %}

{% block title %}
    {% trans %}Groups{% endtrans %}
{% endblock %}

{% block subtitle %}
    {{ regform.title }}
{% endblock %}

{% block content %}
    <div class="toolbar f-j-end">
        {#
            The one e-mail an organizer sends by hand.  It opens a dialog rather
            than firing on a confirmation, because the wording is theirs to edit
            before it goes out; the count is in the label so the button says how
            much it is about to do before it is pressed.  A disabled button never
            fires, so with nothing forming there is nothing to open.
        #}
        <button class="i-button icon-mail {{ 'disabled' if not forming_count }}"
                {{ 'disabled' if not forming_count }}
                data-href="{{ url_for_plugin('group_registration.remind_forming_groups', regform) }}"
                data-title="{% trans %}Remind forming groups{% endtrans %}"
                data-ajax-dialog
                title="{{ _('Write to every member of every group that has not filled yet.')
                          if forming_count else _('No group is still forming.') }}">
            {%- trans %}Remind forming groups{% endtrans %}{% if forming_count %} ({{ forming_count }}){% endif %}
        </button>
        <a class="i-button icon-settings"
           href="{{ url_for_plugin('group_registration.manage_settings', regform) }}">
            {% trans %}Settings{% endtrans %}
        </a>
        <a class="i-button icon-coins"
           href="{{ url_for_plugin('group_registration.manage_balances', regform) }}">
            {% trans %}Balances due{% endtrans %}
        </a>
    </div>

    {% if not groups %}
        {% call message_box('info') %}
            {% trans %}Nobody has created a group on this form yet.{% endtrans %}
        {% endcall %}
    {% else %}
        {#
            Sorting is client-side, through the tablesorter core already loads on
            every management page.  Columns whose text is not what they should
            sort by carry the sort key in `data-text`, which the default
            extraction reads before the cell's content: seats sort by members,
            plans by seat count, states in lifecycle order rather than
            alphabetically, and dates by timestamp.
        #}
        <table class="i-table-widget tablesorter js-group-list">
            <thead>
                <tr>
                    <th>{% trans %}Group{% endtrans %}</th>
                    <th>{% trans %}Code{% endtrans %}</th>
                    <th>{% trans %}Leader{% endtrans %}</th>
                    <th data-sorter="digit">{% trans %}Plan{% endtrans %}</th>
                    <th class="text-right" data-sorter="digit">{% trans %}Seats{% endtrans %}</th>
                    <th data-sorter="digit">{% trans %}State{% endtrans %}</th>
                    <th data-sorter="digit">{% trans %}Created{% endtrans %}</th>
                    <th data-sorter="false"></th>
                </tr>
            </thead>
            <tbody>
                {% for group in groups %}
                    {% set plan = group.pricing_plan %}
                    <tr>
                        <td>{{ group.name }}</td>
                        <td><code>{{ group.formatted_code }}</code></td>
                        {%- if group.leader_registration %}
                            <td>{{ group.leader_registration.full_name }}</td>
                        {%- else %}
                            <td data-text="">
                                <span class="text-not-important">{% trans %}None{% endtrans %}</span>
                            </td>
                        {%- endif %}
                        <td data-text="{{ plan.size if plan else 0 }}">
                            {{- plan.label if plan else _('Standard rate') -}}
                            {%- if group.state.name == 'short' and group.plan_id != group.effective_plan_id %}
                                <span class="text-not-important">
                                    ({% trans label=group.chosen_plan.label if group.chosen_plan else '?' -%}
                                        aimed for {{ label }}
                                    {%- endtrans %})
                                </span>
                            {% endif %}
                        </td>
                        <td class="text-right" data-text="{{ group.member_count }}">
                            {{ group.member_count }} / {{ group.target_size }}
                        </td>
                        <td data-text="{{ group.state.value }}">{{ group.state.title }}</td>
                        <td data-text="{{ group.created_dt.timestamp() | int }}"
                            title="{{ group.created_dt | format_datetime(timezone=event.tzinfo) }}">
                            {{ group.created_dt | format_date(timezone=event.tzinfo) }}
                        </td>
                        <td class="text-right">
                            {% if group.state.name == 'forming' %}
                                <button class="i-button text-color borderless icon-loop js-reconcile"
                                        data-href="{{ url_for_plugin('group_registration.reconcile_group', group) }}"
                                        data-method="POST"
                                        data-reload-after
                                        data-confirm="{% trans %}Reprice this group now, as if the deadline had passed?{% endtrans %}">
                                    {% trans %}Reprice now{% endtrans %}
                                </button>
                            {% endif %}
                            {% if group.state.name != 'dissolved' %}
                                <button class="i-button text-color borderless icon-remove js-dissolve"
                                        data-href="{{ url_for_plugin('group_registration.dissolve_group', group) }}"
                                        data-method="POST"
                                        data-reload-after
                                        {# `&quot;`, not `"`: literal text in a `trans` block is not
                                           escaped, and a bare quote here ended the attribute after
                                           the word "Dissolve". #}
                                        data-confirm="{% trans name=group.name -%}
                                            Dissolve &quot;{{ name }}&quot;? Every member goes back to the standard
                                            rate and anyone who already paid will owe the difference.
                                        {%- endtrans %}">
                                    {% trans %}Dissolve{% endtrans %}
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        {#
            A bare `<script>` on purpose: Indico's template loader stamps the
            page's CSP nonce onto exactly that tag, so this runs whether or not
            an instance enforces its Content Security Policy.  The two `css*`
            options are the class names core's table styles draw the sort
            arrows for; `headerTemplate` is emptied so tablesorter does not add
            its own icon markup next to them; `textAttribute` is its default,
            spelled out because the cells above rely on it.
        #}
        <script>
            $('.js-group-list').tablesorter({
                cssAsc: 'header-sort-asc',
                cssDesc: 'header-sort-desc',
                headerTemplate: '',
                textAttribute: 'data-text',
            });
        </script>
    {% endif %}
{% endblock %}