{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load push_notification_filters %}
{% block content %}
    <div class="table-header">
        <h1 class="heading">
            {% translate "News" %}
        </h1>
        <div class="flex flex-wrap justify-between gap-4">
            <div class="flex flex-wrap gap-4">
                {% include "generic_language_switcher.html" with target="push_notifications" %}
                {% include "search_input_form.html" with object_type="push_notification" language_slug=language.slug %}
            </div>
            {% if perms.cms.change_pushnotification %}
                <div class="flex flex-wrap gap-4">
                    <a href="{% url 'push_notifications_templates' region_slug=request.region.slug language_slug=language.slug %}"
                       class="btn btn-outline">
                        {% translate "Open Templates" %}
                    </a>
                    <a href="{% url 'new_push_notification' region_slug=request.region.slug language_slug=language.slug %}"
                       class="btn">
                        {% translate "Create News" %}
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="table-listing">
        <table class="w-full mt-4 rounded border border-solid border-gray-200 shadow bg-white">
            <thead>
                <tr class="border-b border-solid border-gray-200">
                    <th class="text-sm text-left uppercase py-3 pl-4 pr-2">
                        {% translate "Title" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 px-2">
                        {% translate "Channel" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 px-2">
                        <div class="lang-grid flags whitespace-nowrap">
                            {% spaceless %}
                                {% for lang in languages %}
                                    <a href="{% url 'push_notifications' region_slug=request.region.slug language_slug=lang.slug %}">
                                        <span class="fp fp-rounded fp-{{ lang.primary_country_code }}"
                                              title="{{ lang.translated_name }}"></span>
                                    </a>
                                {% endfor %}
                            {% endspaceless %}
                        </div>
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Last updated" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 pr-2">
                        {% translate "Planned send date" %}
                    </th>
                    <th class="text-sm text-left uppercase py-3 px-2 min">
                        {% translate "Sent" %}
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for push_notification in push_notifications %}
                    {% get_translation push_notification language.slug as push_notification_translation %}
                    {% include "push_notifications/push_notification_list_row.html" %}
                {% empty %}
                    <tr>
                        <td colspan="4" class="px-4 py-3">
                            {% if search_query %}
                                {% translate "No push notifications found with these filters." %}
                            {% else %}
                                {% translate "No push notifications available yet." %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% url "push_notifications" as url %}
    {% include "pagination.html" with chunk=push_notifications %}
{% endblock content %}
