{% extends "_collapsible_box.html" %}
{% load i18n %}
{% load static %}
{% load text_filters %}
{% block collapsible_box_icon %}
    trello
{% endblock collapsible_box_icon %}
{% block collapsible_box_title %}
    {% translate "Unread technical feedback" %}
{% endblock collapsible_box_title %}
{% block collapsible_box_content %}
    <div class="mb-1 text-s text-gray-600">
        {% translate "The five most recent entries are listed." %}
    </div>
    <table class="w-full rounded border border-solid border-gray-200 shadow bg-white mb-4">
        <tr class="border-b border-solid border-gray-200">
            <th class="text-sm text-left uppercase py-3 px-2">
                {% translate "Feedback on" %}
            </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 "Region" %}
            </th>
            <th class="text-sm text-right uppercase py-3 pr-2">
                {% translate "Date" %}
            </th>
        </tr>
        {% for feedback in admin_feedback %}
            <tr class="border-t border-solid border-yellow-200 bg-yellow-100">
                <td class="px-2 py-3 border-l-4 border-yellow-400 truncate max-w-[75px] 3xl:max-w-[150px]"
                    title="{{ feedback.object_name }}">
                    {% if feedback.object_url %}
                        <a href="{{ feedback.object_url }}">{{ feedback.object_name }}</a>
                    {% else %}
                        <div class="table-cell-truncate">
                            <span class="table-cell-content">{{ feedback.object_name }}</span>
                            <a class="copy-search-btn btn-icon inline"
                               data-copy-to-clipboard="{{ feedback.object_name }}"
                               title="{% translate "Copy to clipboard" %}">
                                <i icon-name="copy"></i>
                                <i icon-name="check" class="hidden text-green-500"></i>
                            </a>
                            <a class="toggle-table-cell">
                                <i icon-name="chevron-down" class="more"></i>
                                <i icon-name="chevron-up" class="less"></i>
                            </a>
                        </div>
                    {% endif %}
                </td>
                <td class="pr-2 max-w-[75px] lg:max-w-[300px] xl:max-w-[75px] 3xl:max-w-[300px] 4xl:max-w-[500px]"
                    title="{{ feedback.comment }}">
                    {% if not feedback.comment %}
                        <i icon-name="minus" class="pr-1"></i>
                    {% else %}
                        <div class="table-cell-truncate">
                            <span class="table-cell-content">{{ feedback.comment }}</span>
                            <a class="toggle-table-cell">
                                <i icon-name="chevron-down" class="more"></i>
                                <i icon-name="chevron-up" class="less"></i>
                            </a>
                        </div>
                    {% endif %}
                </td>
                <td class="pr-2">
                    {% if feedback.rating == True %}
                        <i icon-name="thumbs-up"></i>
                    {% elif feedback.rating == False %}
                        <i icon-name="thumbs-down"></i>
                    {% endif %}
                </td>
                <td class="pr-2">
                    <a href="{% url 'dashboard' region_slug=feedback.region.slug %}">{{ feedback.region.name }}</a>
                </td>
                <td class="pr-2 text-right">
                    {{ feedback.created_date }}
                </td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="6" class="px-2 py-3">
                    {% translate "No Feedback available yet." %}
                </td>
            </tr>
        {% endfor %}
    </table>
    <a href="{% url 'admin_feedback' %}" class="btn">{% translate "Open feedback list" %}</a>
{% endblock collapsible_box_content %}
