{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% load text_filters %}
{% block content %}
    {% with filter_form.filters_visible as filters_visible %}
        <div class="table-header">
            <div class="flex flex-wrap justify-between">
                <h1 class="heading">
                    {% translate "Technical Feedback" %}
                </h1>
                <a href="{% url 'admin_feedback_archived' %}"
                   class="font-bold text-sm text-gray-800 flex items-center gap-1 pb-2 hover:underline">
                    <span>
                        <i icon-name="archive" class="align-top h-5"></i>
                        {% translate "Archived Feedback" %}
                        ({{ archived_count }})
                    </span>
                </a>
            </div>
            <div class="flex justify-between">
                {% include "_search_input.html" with object_type="feedback" related_form="admin-feedback-filter-form" %}
                <button id="filter-toggle" class="btn btn-ghost">
                    <span class="filter-toggle-text {% if filters_visible %}hidden{% endif %}">{% translate "Show filters" %}</span>
                    <span class="filter-toggle-text {% if not filters_visible %}hidden{% endif %}">{% translate "Hide filters" %}</span>
                </button>
            </div>
        </div>
        <div id="filter-form-container"
             class="{% if not filters_visible %}hidden{% endif %} w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white">
            {% include "feedback/_admin_feedback_filter_form.html" %}
        </div>
    {% endwith %}
    <div class="table-listing">
        <form id="bulk-action-form" method="post">
            {% csrf_token %}
        </form>
        <table class="w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white"
               data-enable-row-checkbox-toggle>
            <thead>
                <tr class="border-b border-solid border-gray-200">
                    <th class="py-3 pl-4 pr-2 min">
                        <input form="bulk-action-form"
                               type="checkbox"
                               id="bulk-select-all"
                               title="{% translate "Select all" %}" />
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Category" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Feedback on" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Language" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Comment" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Rating" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Rating" %} ({% translate "overall" %})
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Region" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Marked as read by" %}
                    </th>
                    <th class="text-sm text-right uppercase py-3 pr-2">
                        {% translate "Date" %}
                    </th>
                </tr>
            </thead>
            <tbody>
                {% if admin_feedback %}
                    {% for feedback in admin_feedback %}
                        {% include "feedback/admin_feedback_list_row.html" with admin_feedback=admin_feedback %}
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="9" class="px-2 py-3 text-center">
                            {% if filter_form.has_changed %}
                                {% translate "No feedback found with these filters." %}
                            {% else %}
                                {% translate "No feedback available yet." %}
                            {% endif %}
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    {% if admin_feedback %}
        <div class="pt-2 px-2">
            <div class="inline">
                <span class="text-gray-800 font-bold" data-list-selection-count>0</span> <span class="text-gray-600">{% translate "Feedback entries selected" %}</span>
            </div>
        </div>
    {% endif %}
    <div class="flex flex-col">
        {% if perms.cms.change_feedback %}
            <div class="flex self-start gap-2 mt-2">
                <select id="bulk-action">
                    <option>
                        {% translate "Select bulk action" %}
                    </option>
                    <option data-bulk-action="{% url 'mark_admin_feedback_as_read' %}">
                        {% translate "Mark as read" %}
                    </option>
                    <option data-bulk-action="{% url 'mark_admin_feedback_as_unread' %}">
                        {% translate "Mark as unread" %}
                    </option>
                    <option data-bulk-action="{% url 'archive_admin_feedback' %}">
                        {% translate "Archive" %}
                    </option>
                    {% if perms.cms.delete_feedback %}
                        <option data-bulk-action="{% url 'delete_admin_feedback' %}">
                            {% translate "Delete" %}
                        </option>
                    {% endif %}
                </select>
                <button form="bulk-action-form" id="bulk-action-execute" class="btn" disabled>
                    {% translate "Execute" %}
                </button>
            </div>
        {% endif %}
        {% include "pagination.html" with chunk=admin_feedback %}
    </div>
{% endblock content %}
