{% extends "_base.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% load content_filters %}
{% load push_notification_filters %}
{% block content %}
    <form method="post" data-unsaved-warning>
        {% csrf_token %}
        <div class="w-full flex flex-wrap justify-between gap-4 mb-6">
            <h1 class="heading overflow-hidden text-ellipsis">
                {% if push_notification_form.instance.id %}
                    {% with push_notification_form.instance as push_notification_title %}
                        {% blocktranslate trimmed %}
                            Edit News "{{ push_notification_title }}"
                        {% endblocktranslate %}
                    {% endwith %}
                {% else %}
                    {% translate "Create News" %}
                {% endif %}
            </h1>
            <div class="flex flex-wrap gap-4 ml-auto mr-0">
                {% if perms.cms.change_pushnotification and not not_accessible_regions_warning %}
                    <a href="{% if not push_notification_form.instance.archived %}{% url 'push_notifications' region_slug=request.region.slug language_slug=language.slug %}{% else %}{% url 'archived_push_notifications' region_slug=request.region.slug language_slug=language.slug %}{% endif %}"
                       class="btn btn-ghost">{% translate "Cancel" %}</a>
                    {% if not push_notification_form.instance.archived %}
                        <button name="submit_update" class="btn btn-ghost">
                            {% if not push_notification_form.instance.sent_date %}
                                {% translate "Save" %}
                            {% else %}
                                {% translate "Update" %}
                            {% endif %}
                        </button>
                        {% if push_notification_form.instance.id and not push_notification_form.instance.sent_date and perms.cms.send_push_notification %}
                            <div id="button_submit_send">
                                <button name="submit_send"
                                        class="btn {% if push_notification_form.instance.scheduled_send_date %}hidden{% endif %}">
                                    {% translate "Send" %}
                                </button>
                                <button name="submit_schedule"
                                        class="btn {% if not push_notification_form.instance.scheduled_send_date %}hidden{% endif %}">
                                    {% if push_notification_form.instance.scheduled_send_date %}
                                        {% translate "Re-schedule" %}
                                    {% else %}
                                        {% translate "Schedule" %}
                                    {% endif %}
                                </button>
                            </div>
                        {% endif %}
                    {% endif %}
                {% endif %}
            </div>
        </div>
        <div class="flex-col flex-wrap">
            <ul id="tab-wrapper" class="flex flex-wrap items-end px-4">
                {% for other_language in languages %}
                    <li class="mr-2 -mb-[2px] {% if other_language == language %}z-10{% endif %}">
                        <div class="font-bold bg-white">
                            <div class="border-b-2 border-white">
                                {% if other_language == language %}
                                    <div class="py-[calc(0.75rem+2px)] px-4 border-l border-t border-r border-blue-500 rounded-t text-blue-500 cursor-default">
                                    {% else %}
                                        <a class="block py-[calc(0.75rem+2px)] px-4 bg-water-500 border-l border-t border-r border-blue-500 rounded-t text-black hover:bg-white hover:text-blue-500"
                                           href="{% url 'edit_push_notification' region_slug=request.region.slug language_slug=other_language.slug push_notification_id=push_notification_form.instance.id %}">
                                        {% endif %}
                                        <span class="flex-grow language-name">{{ other_language.translated_name }}</span>
                                        <span class="flex-end w-8 fp fp-rounded fp-{{ other_language.primary_country_code }}"></span>
                                        {% if other_language.secondary_country_code %}
                                            <span class="fp ml-1 w-8 fp-rounded fp-{{ other_language.secondary_country_code }}"></span>
                                        {% endif %}
                                        {% if other_language != language %}
                                        </a>
                                    {% else %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                {% endfor %}
                {% if languages|length > 4 %}
                    <li class="z-10 ml-auto">
                        <div id="language-switcher" class="relative flex flex-col text-black">
                            <div id="language-switcher-current"
                                 class="flex font-bold text-right bg-water-500 py-[calc(0.75rem+2px)] px-4 border-l border-t border-r border-blue-500 rounded-t cursor-default">
                                <i id="language-switcher-globe" icon-name="globe" class="hidden"></i>
                                <span id="language-switcher-text">{% translate "Other Languages" %}</span>
                                <i icon-name="chevron-down"></i>
                            </div>
                            <ul id="language-switcher-list"
                                class="absolute bottom-0 right-0 z-10 hidden h-0">
                            </ul>
                        </div>
                    </li>
                {% endif %}
            </ul>
            <div class="flex flex-col flex-wrap gap-4">
                <div class="flex flex-col flex-auto w-full bg-white border border-blue-500 rounded shadow-2xl">
                    <div class="flex flex-col flex-auto w-full p-4">
                        <div class="flex justify-between">
                            <label for="{{ push_notification_translation_form.title.id_for_label }}"
                                   data-slugify-url="{% url 'slugify_ajax' region_slug=request.region.slug language_slug=language.slug model_type='poi' %}"
                                   {% if push_notification_form.instance.id %}data-model-id="{{ push_notification_form.instance.id }}"{% endif %}>
                                {{ push_notification_translation_form.title.label }}
                            </label>
                            {% if push_notification_form.instance.sent_date and push_notification_translation_form.instance.id %}
                                <div class="text-right py-2">
                                    <span class="text-lg font-bold">{% translate "Link" %}:</span>
                                    <a href="{{ WEBAPP_URL }}{{ push_notification_translation_form.instance.get_absolute_url }}"
                                       class="text-blue-500 hover:underline"
                                       target="_blank"
                                       rel="noopener noreferrer">
                                        {{ WEBAPP_URL }}{{ push_notification_translation_form.instance.get_absolute_url }}
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                        {% render_field push_notification_translation_form.title|add_error_class:"border-red-500" class+="mb-2" %}
                        <label for="{{ push_notification_translation_form.text.id_for_label }}">
                            {{ push_notification_translation_form.text.label }}
                        </label>
                        {% render_field push_notification_translation_form.text class+="tinymce_textarea flex-auto" %}
                        {% spaceless %}
                            <p>
                                <span id="input-length-counter" class="input-length-counter"></span>
                                <span>/{{ push_notification_translation_form.fields.text.max_length }}</span>
                            </p>
                        {% endspaceless %}
                    </div>
                </div>
            </div>
        </div>
        <div class="py-4 grid grid-cols-5 items-start flex flex-wrap gap-8">
            <div class="flex flex-col flex-wrap col-span-3">
                {% if push_notification_translation_form.mt_form_is_enabled %}
                    {% include "./push_notification_translation_box.html" with box_id="push-notification-translation" %}
                {% endif %}
            </div>
            <div class="flex flex-col flex-wrap col-span-2">
                {% include "./push_notification_setting_box.html" with box_id="push-notification-setting" %}
            </div>
        </div>
    </form>
{% endblock content %}