{% load i18n %}
{% load widget_tweaks %}
<div class="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" %}
            <!-- Scheduled date and time -->
            {% if push_notification_form.instance.id %}
                <div class="{% if 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>
            {% endif %}
            <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 %}
                        {% translate "Any manager with access to only some of the selected regions can view but not edit this news." %}
                    {% 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 %}
        <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 %}
                    <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 }}
                    <br>
                {% elif push_notification_form.instance.scheduled_send_date %}
                    <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 }}
                {% else %}
                    <label>
                        <i icon-name="pencil-line" class="text-blue-500 align-text-bottom"></i>
                        {% translate "Not yet sent" %}
                    </label>
                    {% translate "News not sent yet" %}
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>