{% extends "cradmin_legacy/base.django.html" %}
{% load i18n %}
{% load cradmin_legacy_icon_tags %}

{% block title %}{{ pagetitle }}{% endblock title %}

{% block pageheader-inner %}
    <h1>
        {% block heading %}
            {{ pageheading }}
        {% endblock heading %}
    </h1>
{% endblock pageheader-inner %}

{% block content %}
    {% if buttons or enable_search %}
        <div class="container">
            {% if buttons and enable_search %}
                <div class="objecttableview-buttons-and-search-box">
            {% endif %}
                {% block global-buttonrow %}
                    {% if buttons %}
                        <p class="objecttableview-global-buttons">
                            {% for button in buttons %}
                                {{ button.render }}
                            {% endfor %}
                        </p>
                    {% endif %}
                {% endblock global-buttonrow %}

                {% if enable_search %}
                    <form class="form-inline cradmin-searchform" role="search" method="get"
                            action="{{ request.get_full_path }}">
                        <div class="input-group">
                            {% for name, value in search_hidden_fields %}
                                <input type="hidden"
                                       name="{{ name }}"
                                       value="{{ value }}">
                            {% endfor %}

                            <input class="form-control" name="search" type="text"
                                   placeholder="{% trans 'Search...' %}"
                                   value="{{ current_search }}"
                                   {% if focus_on_searchfield %}focusonme{% endif %}>
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-default">
                                    <span class="{% cradmin_icon 'search' %}"></span>
                                    <span class="sr-only">{% trans "Search" %}</span>
                                </button>
                            </span>
                        </div>
                     </form>
                {% endif %}
            {% if buttons and enable_search %}
                </div>
            {% endif %}
        </div>
    {% endif %}

    {% if use_this_hidden_attribute %}
        <div cradmin-legacy-use-this-hidden={{ use_this_hidden_attribute|safe }}></div>
    {% endif %}

    <div class="container">
        {% block tablewrapper %}
            <div class="cradmin-legacy-listfilter-target"
                 id="cradmin_legacy_objecttableview_tablewrapper"
                 aria-live="polite">
                {% if queryset_contains_items %}
                    <div
                        {% if multiselect_actions %}
                            ng-controller="CradminMultiselectObjectTableViewController"
                            ng-init="
                                items={
                                    {% for row in table %}
                                        'item_{{ row.object.pk }}': false{% if not forloop.last %},{% endif %}
                                    {% endfor %}
                                };
                                actions={{ multiselect_actions }}
                            "
                        {% endif %}
                    >
                        <form class="cradmin-legacy-form" method="post"
                                {% if multiselect_actions %}
                                    {% comment %}
                                        What we put here does not really matter - it just needs
                                        to be a value so AngularJS does not prevent submit.
                                    {% endcomment %}
                                    action="{{ request.build_absolute_uri }}"
                                    cradmin-legacy-form-action="{% verbatim %}selectedAction.url{% endverbatim %}"
                                {% elif form_action %}
                                    action="{{ form_action }}"
                                {% endif %}>

                            {% if multiselect_actions %}
                                {% comment %}
                                    NOTE: Used by the views handling the multiselect to distinguish
                                    between POST requests from this view, and within that view.
                                {% endcomment %}
                                <input type="hidden" name="is_the_multiselect_form" value="yes">
                            {% endif %}
                            {% csrf_token %}

                            <table id="objecttableview-table" class="table cradmin-legacy-table">
                                <thead class="{% if hide_column_headers %}sr-only{% endif %}">
                                    <tr>
                                        {% if multiselect_actions %}
                                            <th class="objecttableview-multiselectcolumn">
                                                <input type="checkbox"
                                                    ng-cloak
                                                    ng-checked="selectAllChecked"
                                                    ng-click="toggleAllCheckboxes()">
                                            </th>
                                        {% endif %}
                                        {% for column in columns %}
                                            <th class="{{ column.get_headercell_css_class_string }}"
                                                    style="{{ column.get_headercell_css_style }}">
                                                {% if column.is_sortable %}
                                                    <a class="objecttableview-flip-ordering-button"
                                                            href="{{ column.get_flip_ordering_url }}">
                                                        {{ column.get_header|capfirst }}
                                                        {% if column.orderinginfo.order_ascending %}
                                                            <span class="sr-only">- {% trans "Ordered ascending - Click to order descending" %}</span>
                                                        {% else %}
                                                            <span class="sr-only">- {% trans "Ordered descending - Click to order ascending" %}</span>
                                                        {% endif %}
                                                    </a>
                                                    {% if column.is_ordered %}
                                                        <span class="objecttableview-orderingmeta">
                                                            <a class="objecttableview-remove-ordering-button"
                                                                    href="{{ column.get_remove_ordering_url }}"
                                                                    title='{% trans "Do not order by this column" %}'>
                                                                <span class="{% cradmin_icon 'x' %}"></span>
                                                            </a>
                                                            {% if multicolumn_ordering %}
                                                                <span class="objecttableview-orderingindex">
                                                                    <span class="sr-only"> - {% trans "Ordering priority" %}</span>
                                                                    {{ column.orderinginfo.orderingstringindex|add:1 }}
                                                                </span>
                                                            {% endif %}
                                                            <span class="objecttableview-orderingdirection">
                                                                {% if column.orderinginfo.order_ascending %}
                                                                    <span class="{% cradmin_icon 'caret-down' %}"></span>
                                                                {% else %}
                                                                    <span class="{% cradmin_icon 'caret-up' %}"></span>
                                                                {% endif %}
                                                            </span>
                                                        </span>
                                                    {% endif %}
                                                {% else %}
                                                    {{ column.get_header|capfirst }}
                                                {% endif %}
                                            </th>
                                        {% endfor %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for row in table %}
                                        <tr class="{{ row.css_classes }}"
                                            {% if multiselect_actions %}
                                                ng-class="{'objecttableview-selected-row': items.item_{{ row.object.pk }} }"
                                            {% endif %}
                                        >
                                            {% if multiselect_actions %}
                                                <td class="objecttableview-multiselectcolumn">
                                                    <input type="checkbox"
                                                        name="selected_objects"
                                                        value="{{ row.object.pk }}"
                                                        ng-cloak
                                                        ng-checked="items.item_{{ row.object.pk }}"
                                                        ng-click="toggleCheckbox('item_{{ row.object.pk }}')">
                                                </td>
                                            {% endif %}
                                            {% for column, rendered_cell in row.cells %}
                                                <td class="{{ column.get_normalcell_css_class_string }}"
                                                        data-columntitle="{{ column.get_header|capfirst }}"
                                                        style="{{ column.get_normalcell_css_style }}">
                                                    {{ rendered_cell }}
                                                </td>
                                            {% endfor %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            {% include "cradmin_legacy/viewhelpers/includes/pager.django.html" with extra_querystring=pager_extra_querystring %}

                            {% if multiselect_actions %}
                                <div class="cradmin_legacy_submitrow objecttableview-multiselect-submitrow"
                                        ng-class="{cradmin_legacy_submitrow_hidden: numberOfSelected==0}">
                                    <select class="form-control"
                                            ng-model="selectedAction"
                                            ng-options="action.label for action in actions">
                                        <option value="">--- {% trans "Select an action" %} ---</option>
                                    </select>
                                    <button type="submit" class="btn btn-primary" ng-disabled="!selectedAction">
                                        {% trans "Go" %}
                                    </button>
                                </div>
                            {% endif %}
                        </form>
                    </div> {# END div with ng-controller="CradminMultiselectObjectTableViewController" #}

                {% else %}
                    <div class="cradmin-legacy-listing-no-items-message cradmin-legacy-objecttable-no-items-message"
                            id="objecttableview-no-items-message">
                        {{ no_items_message|safe }}
                    </div>
                {% endif %}

                {% if current_search_matchcount == 0 %}
                    <div class="cradmin-legacy-objecttable-no-searchresults-message" id="objecttableview-no-searchresults-message">
                        {{ no_searchresults_message|safe }}
                    </div>
                {% endif %}
            </div>
        {% endblock tablewrapper %}
    </div>
{% endblock content %}

{% block outside-bodycontentwrapper %}
    {{ block.super }}
    {% if enable_previews %}
        <div cradmin-legacy-page-preview-wrapper>
            {% include "cradmin_legacy/pagepreview/includes/pagepreview-fullsize-iframe-wrapper.django.html" %}
        </div>
    {% endif %}
{% endblock outside-bodycontentwrapper %}
