{% extends 'categories/management/base.html' %}

{% from 'categories/management/_events_list.html' import render_events_list %}
{% from 'categories/management/_create_category_button.html' import create_category_button %}
{% from 'events/management/_create_event_button.html' import create_event_button %}

{% macro subcategory_row(subcategory) %}
    <tr class="i-table"
        data-category-id="{{ subcategory.id }}"
        data-category-title="{{ subcategory.title }}">
        <td class="i-table column-icon js-handle handle">
            <a class="i-link icon-handle"></a>
        </td>
        <td class="i-table column-icon">
            <input type="checkbox" name="category_id" value="{{ subcategory.id }}"
                   data-is-empty="{{ subcategory.is_empty|tojson|forceescape }}">
        </td>
        <td class="i-table column-icon">
            {% if subcategory.is_self_protected %}
                <span class="icon-protection-self"></span>
            {% elif subcategory.is_public %}
                <span class="icon-protection-public"></span>
            {% endif %}
        </td>
        <td class="i-table">
            <a href="{{ url_for('.manage_content', subcategory) }}">
                {{ subcategory.title }}
            </a>
        </td>
        <td class="i-table actions">
            {{ move_category_button(subcategory, 'i-link') }}
            {{ delete_category_button(subcategory, 'i-link') }}
        </td>
    </tr>
{% endmacro %}

{% macro subcategories_table(subcategories, has_events=false) %}
    <div class="toolbars space-after">
        <div class="toolbar">
            <div class="group">
                <button class="i-button icon-checkbox-checked arrow js-dropdown" data-toggle="dropdown"></button>
                <ul class="i-dropdown">
                    <li>
                        <a href="#" data-select-all=".category-management input:checkbox[name=category_id]">
                            {% trans 'Selection' %}All{% endtrans %}
                        </a>
                    </li>
                    <li>
                        <a href="#" data-select-none=".category-management input:checkbox[name=category_id]">
                            {% trans 'Selection' %}None{% endtrans %}
                        </a>
                    </li>
                </ul>
            </div>
            <div class="group">
                {{ create_category_button(category, classes='highlight icon-plus') }}
                {% if not has_events %}
                    {{ create_event_button(category, text=_("Create event")) }}
                {% endif %}
            </div>
            <div class="group">
                <button class="i-button icon-sort-alpha-asc js-sort-categories"
                        title="{% trans %}Sort categories alphabetically (ascending){% endtrans %}"
                        data-sort-order="1"></button>
                <button class="i-button icon-sort-alpha-desc js-sort-categories"
                        title="{% trans %}Sort categories alphabetically (descending){% endtrans %}"
                        data-sort-order="-1"></button>
            </div>
        </div>
        <div class="toolbar">
            <span class="i-button label icon-list"
                  title="{% trans count=subcategories|count %}{{ count }} displayed{% endtrans %}">
                <strong>{{ subcategories|count }}</strong>
            </span>
            <div class="group">
                <button class="i-button icon-transmission js-bulk-move-category"
                        data-href="{{ url_for('categories.move_subcategories', category) }}"></button>
                <button class="i-button icon-remove js-bulk-delete-category"></button>
            </div>
        </div>
    </div>
    <table class="i-table category-management"
           data-sort-url="{{ url_for('.sort_subcategories', category) }}"
           data-bulk-delete-url="{{ url_for('.delete_subcategories', category) }}"
           data-bulk-move-url="{{ url_for('.move_subcategories', category) }}">
        <thead>
            <tr class="i-table">
                <th class="i-table column-icon"></th>
                <th class="i-table column-icon"></th>
                <th class="i-table column-icon"></th>
                <th class="i-table">{% trans %}Title{% endtrans %}</th>
                <th class="i-table actions"></th>
            </tr>
        </thead>
        <tbody>
            {% for subcategory in subcategories %}
                {{ subcategory_row(subcategory) }}
            {% endfor %}
        </tbody>
    </table>
{% endmacro %}

{% block title %}
    {% if subcategories %}
        {% trans %}Categories{% endtrans %}
        {# If the category also contains events, a second title will be displayed further down the page. #}
    {% elif events.total %}
        {% trans %}Events{% endtrans %}
    {% else %}
        {% trans %}Content{% endtrans %}
    {% endif %}
{% endblock %}

{% block content %}
    {% if not subcategories and not events.total %}
        <p>
            {% trans %}This category is empty. A category can either hold categories or events.{% endtrans %}
        </p>
        <div class="toolbar">
            {{ create_category_button(category) }}
            {{ create_event_button(category, text=_("Create event")) }}
        </div>
    {% else %}
        {% if subcategories %}
            {{ subcategories_table(subcategories, events.total|bool) }}
            <script>
                setupCategoryTable({{ category.id }});
            </script>
        {% endif %}
        {% if events.total %}
            {% if subcategories %}
                <header>
                    <div class="title">
                        <div class="text">
                            <h2>{% trans %}Events{% endtrans %}</h2>
                        </div>
                    </div>
                </header>
            {% endif %}
            {{ render_events_list(category, page, order_column, direction, events) }}
            <script>
                setupCategoryEventList({{ category.id }});
            </script>
        {% endif %}
    {% endif %}
{% endblock content %}
