{% extends "_base.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% load push_notification_filters %}
{% block content %}
    <form method="post" data-unsaved-warning>
        {% csrf_token %}
        <div class="flex flex-wrap">
            <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 %}
                            {% if push_notification_form.is_template.value %}
                                {% blocktranslate trimmed %}
                                    Edit Template "{{ push_notification_title }}"
                                {% endblocktranslate %}
                            {% else %}
                                {% blocktranslate trimmed %}
                                    Edit News "{{ push_notification_title }}"
                                {% endblocktranslate %}
                            {% endif %}
                        {% endwith %}
                    {% elif push_notification_form.is_template.value %}
                        {% translate "Create News Template" %}
                    {% 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 %}
                        {% if push_notification_form.is_template.value %}
                            {# BUTTONS FOR NEWS TEMPLATES #}
                            <button name="submit_draft" class="btn btn-outline">
                                {% if push_notification_form.instance.id %}
                                    {% translate "Update template" %}
                                {% else %}
                                    {% translate "Save template" %}
                                {% endif %}
                            </button>
                            <button name="create_from_template" class="btn">
                                {% translate "Create news from template" %}
                            </button>
                        {% else %}
                            {# BUTTONS FOR NEWS #}
                            <button name="submit_draft" class="btn btn-outline">
                                {% translate "Save as draft" %}
                            </button>
                            {% if push_notification_form.instance.sent_date %}
                                <button name="submit_update" class="btn">
                                    {% translate "Update" %}
                                </button>
                            {% elif 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 "Save & Send" %}
                                    </button>
                                    <button name="submit_schedule"
                                            class="btn {% if not push_notification_form.instance.scheduled_send_date %}hidden{% endif %}">
                                        {% translate "Save & Schedule" %}
                                    </button>
                                </div>
                            {% endif %}
                        {% endif %}
                    {% endif %}
                </div>
            </div>
            <div class="flex flex-wrap flex-col grow pr-4 tabbed">
                <ul class="flex flex-wrap pl-4 text-black">
                    {% for other_language in languages %}
                        <li id="li-{{ other_language.id }}"
                            class="language-tab-header mr-2 -mb-[2px] {% if other_language.id == language.id %} z-10 text-blue-500 bg-white cursor-default {% else %} bg-water-500 {% endif %} hover:text-blue-500 hover:bg-white border-l border-t border-r border-blue-500 font-bold rounded-t-lg cursor-pointer"
                            data-switch-language="{{ other_language.id }}"
                            data-text-direction="{{ other_language.text_direction }}">
                            <div class="border-b-2 border-white">
                                <div class="p-4">
                                    {{ other_language.translated_name }}
                                    <span class="fp fp-rounded fp-{{ other_language.primary_country_code }}"></span>
                                    {% if other_language.secondary_country_code %}
                                        <span class="fp fp-rounded fp-{{ other_language.secondary_country_code }}"></span>
                                    {% endif %}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                <figure>
                    {{ pnt_formset.management_form }}
                    {% for push_notification_translation_form in pnt_formset %}
                        <div id="tab-{{ push_notification_translation_form.language.value }}"
                             class="language-tab-content w-full mb-4 rounded border border-blue-500 bg-white flex-auto {% if push_notification_translation_form.language.value|add:0 != language.id|add:0 %}hidden{% endif %}">
                            <div class="w-full px-4 pb-4">
                                <div class="flex justify-between mr-2">
                                    <label for="{{ push_notification_translation_form.title.id_for_label }}">
                                        {{ 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" %}
                                <label for="{{ push_notification_translation_form.text.id_for_label }}">
                                    {{ push_notification_translation_form.text.label }}
                                </label>
                                {% render_field push_notification_translation_form.text|add_error_class:"border-red-500" %}
                                {% spaceless %}
                                    <p>
                                        <span class="input-length-counter"></span>
                                        <span>/{{ push_notification_translation_form.fields.text.max_length }}</span>
                                    </p>
                                {% endspaceless %}
                                <div class="hidden">
                                    {% render_field push_notification_translation_form.id %}
                                    {% render_field push_notification_translation_form.language %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </figure>
            </div>
            <div class="w-[400px] flex flex-wrap flex-col gap-4">
                <div class="rounded border border-blue-500 shadow-2xl bg-white">
                    <div class="rounded p-4 bg-water-500">
                        <h3 class="heading font-bold text-black">
                            <i icon-name="settings" class="pb-1"></i>
                            {% translate "Settings" %}
                        </h3>
                    </div>
                    <div class="px-4 pb-4 rounded bg-white">
                        <label for="{{ push_notification_form.channel.id_for_label }}">
                            {{ push_notification_form.channel.label }}
                        </label>
                        {% render_field push_notification_form.channel|add_error_class:"border-red-500" %}
                        <label for="{{ push_notification_form.mode.id_for_label }}">
                            {{ push_notification_form.mode.label }}
                        </label>
                        {% render_field push_notification_form.mode|add_error_class:"border-red-500" %}
                        <!-- Create template from message -->
                        <div class="hidden">
                            {% render_field push_notification_form.is_template|add_error_class:"border-red-500" %}
                        </div>
                        <div id="push_notification_template_name" class="hidden">
                            <label for="{{ push_notification_form.template_nameid_for_label }}">
                                {{ push_notification_form.template_name.label }}
                            </label>
                            {% render_field push_notification_form.template_name|add_error_class:"border-red-500" %}
                        </div>
                        <!-- Scheduled date and time -->
                        <div class="{% if push_notification_form.is_template.value or push_notification_form.instance.sent_date %}hidden{% endif %}">
                            {% render_field push_notification_form.schedule_send|add_error_class:"border-red-500" %}
                            <label for="{{ push_notification_form.schedule_send.id_for_label }}">
                                {{ push_notification_form.schedule_send.label }}
                            </label>
                        </div>
                        <div id="push_notification_schedule" class="hidden">
                            <label for="{{ push_notification_form.scheduled_send_date_day.id_for_label }}">
                                {{ push_notification_form.scheduled_send_date_day.label }}
                            </label>
                            {% render_field push_notification_form.scheduled_send_date_day|add_error_class:"border-red-500" %}
                            <label for="{{ push_notification_form.scheduled_send_date_time.id_for_label }}">
                                {{ push_notification_form.scheduled_send_date_time.label }}
                            </label>
                            {% render_field push_notification_form.scheduled_send_date_time|add_class:"invalid:border-red-500"|add_error_class:"border-red-500" %}
                            {% if schedule_interval > 1 %}
                                {% blocktranslate trimmed %}
                                    News are sent every {{ schedule_interval }} minutes
                                {% endblocktranslate %}
                            {% endif %}
                        </div>
                        <div {% if push_notification_form.regions|length == 1 %}class="hidden"{% endif %}>
                            <label for="{{ push_notification_form.regions.id_for_label }}">
                                {{ push_notification_form.regions.label }}
                            </label>
                            <p>
                                {% if not_accessible_regions_warning %}
                                    <i icon-name="x" class="text-red-500 align-text-top"></i>
                                    {{ not_accessible_regions_warning }}
                                {% else %}
                                    {% if push_notification_form.is_template.value %}
                                        {% translate "Any manager with access to only some of the selected regions can view but not edit this news template." %}
                                    {% else %}
                                        {% translate "Any manager with access to only some of the selected regions can view but not edit this news." %}
                                    {% endif %}
                                {% endif %}
                            </p>
                            <div class="max-h-52 overflow-y-auto">
                                {% render_field push_notification_form.regions|add_error_class:"border-red-500" %}
                            </div>
                            {% if push_notification_form.regions|length == 1 and not_accessible_regions_warning %}
                                <p class="pt-6">
                                    <i icon-name="x" class="text-red-500 align-text-top"></i>
                                    {{ not_accessible_regions_warning }}
                                </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if push_notification_form.instance.id and not push_notification_form.instance.is_template %}
                    <div class="rounded border border-blue-500 shadow-2xl bg-white">
                        <div class="rounded p-4 bg-water-500">
                            <h3 class="heading font-bold text-black">
                                <i icon-name="settings" class="pb-1"></i>
                                {% translate "Status" %}
                            </h3>
                        </div>
                        <div class="px-4 pb-4 rounded bg-white">
                            {% if push_notification_form.instance.sent_date %}
                                {% if push_notification_form.instance.draft %}
                                    <label>
                                        <i icon-name="check" class="text-green-500 align-text-top"></i>
                                        {% translate "Sent draft" %}
                                    </label>
                                    {% blocktranslate trimmed with sent_date=push_notification_form.instance.sent_date %}
                                        News was sent on {{ sent_date }}, but is now in draft state, which means it is no longer shown in the news section of the app.
                                    {% endblocktranslate %}
                                {% else %}
                                    <label>
                                        <i icon-name="check" class="text-green-500 align-text-top"></i>
                                        {% translate "Sent" %}
                                    </label>
                                    {% translate "News sent on:" %}
                                    <br>
                                    {{ push_notification_form.instance.sent_date }}
                                {% endif %}
                                <br>
                            {% elif push_notification_form.instance.scheduled_send_date %}
                                {% if push_notification_form.instance.draft %}
                                    <label>
                                        <i icon-name="calendar-off" class="align-text-bottom"></i>
                                        {% translate "Draft" %}
                                    </label>
                                    {% translate "News is scheduled, but in draft and will not be sent automatically." %}
                                {% else %}
                                    <label>
                                        <i icon-name="calendar-clock" class="text-blue-500 align-text-bottom"></i>
                                        {% translate "Scheduled" %}
                                    </label>
                                    {% translate "News will be sent automatically on:" %}
                                    <br>
                                    {{ push_notification_form.instance.scheduled_send_date }}
                                {% endif %}
                            {% else %}
                                <label>
                                    <i icon-name="pencil-line" class="text-blue-500 align-text-bottom"></i>
                                    {% translate "Draft" %}
                                </label>
                                {% translate "News not sent yet" %}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </form>
{% endblock content %}
