{% extends "admin/layout.html" %}

{% block body %}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Broadcast{% endtrans %}</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Send emails and push notifications to targeted users{% endtrans %}</p>
    </div>
</div>

{% if summary %}
<div class="rounded-xl border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/20 p-5 mb-6" data-testid="broadcast-summary">
    <h4 class="text-sm font-bold text-green-800 dark:text-green-300 mb-3 flex items-center gap-2">
        <i class="fa fa-check-circle"></i> {% trans %}Broadcast sent successfully{% endtrans %}
    </h4>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        <div class="text-center">
            <div class="text-2xl font-bold text-green-700 dark:text-green-300">{{ summary.total }}</div>
            <div class="text-xs text-green-600 dark:text-green-400">{% trans %}Recipients{% endtrans %}</div>
        </div>
        <div class="text-center">
            <div class="text-2xl font-bold text-blue-700 dark:text-blue-300">{{ summary.emails_sent }}</div>
            <div class="text-xs text-blue-600 dark:text-blue-400">{% trans %}Emails sent{% endtrans %}</div>
        </div>
        {% if summary.email_failed %}
        <div class="text-center">
            <div class="text-2xl font-bold text-red-700 dark:text-red-300">{{ summary.email_failed }}</div>
            <div class="text-xs text-red-600 dark:text-red-400">{% trans %}Emails failed{% endtrans %}</div>
        </div>
        {% endif %}
        <div class="text-center">
            <div class="text-2xl font-bold text-purple-700 dark:text-purple-300">{{ summary.push_sent }}</div>
            <div class="text-xs text-purple-600 dark:text-purple-400">{% trans %}Push sent{% endtrans %}</div>
        </div>
        {% if summary.push_failed %}
        <div class="text-center">
            <div class="text-2xl font-bold text-red-700 dark:text-red-300">{{ summary.push_failed }}</div>
            <div class="text-xs text-red-600 dark:text-red-400">{% trans %}Push failed{% endtrans %}</div>
        </div>
        {% endif %}
        <div class="text-center">
            <div class="text-2xl font-bold text-red-700 dark:text-red-300">{{ summary.failures }}</div>
            <div class="text-xs text-red-600 dark:text-red-400">{% trans %}Total failures{% endtrans %}</div>
        </div>
    </div>
</div>
{% endif %}

<form method="POST" id="broadcast-form">
<div class="space-y-5">

    <!-- Filter bar -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
            <i class="fa fa-filter text-orange-500"></i> {% trans %}Recipient Filters{% endtrans %}
        </h4>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">{% trans %}Plans{% endtrans %} <span class="text-gray-400 font-normal">({% trans %}leave empty for all{% endtrans %})</span></label>
                <div class="space-y-1.5" data-testid="filter-plans">
                    {% for plan in plans %}
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="filter_plan_ids" value="{{ plan.id }}"
                               class="rounded border-gray-300 dark:border-gray-600 text-primary filter-plan-cb"
                               data-testid="plan-cb-{{ plan.id }}">
                        <span class="text-sm text-gray-700 dark:text-gray-300">{{ plan.name }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">{% trans %}Countries{% endtrans %} <span class="text-gray-400 font-normal">({% trans %}comma-separated, leave empty for all{% endtrans %})</span></label>
                <input type="text" id="filter-countries" name="filter_countries"
                       class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                       placeholder="e.g. United States, Germany"
                       data-testid="filter-countries">
            </div>
        </div>
        <div class="mt-4">
            <button type="button" id="btn-load-recipients"
                    class="px-4 py-2 rounded-xl bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-all"
                    data-testid="btn-load-recipients">
                <i class="fa fa-search mr-1.5"></i>{% trans %}Load recipients{% endtrans %}
            </button>
        </div>
    </div>

    <!-- Recipient checklist -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5" id="recipients-panel" style="display:none">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-2">
            <i class="fa fa-users text-teal-500"></i>
            {% trans %}Recipients{% endtrans %}
            <span class="text-xs font-normal text-gray-500" id="recipient-count-label"></span>
        </h4>

        <!-- Stats bar (shown after load) -->
        {% include 'admin/_broadcast_stats.html' %}

        <!-- Push channel warning -->
        <div id="push-no-subs-warning" class="hidden mb-3 flex items-start gap-2 px-4 py-3 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700">
            <i class="fa fa-triangle-exclamation text-amber-500 mt-0.5 shrink-0"></i>
            <div class="flex-1 text-xs text-amber-700 dark:text-amber-300">{% trans %}No push-subscribed users are selected — push messages will not be delivered.{% endtrans %}</div>
            <button type="button" onclick="this.closest('#push-no-subs-warning').classList.add('hidden')"
                    class="shrink-0 text-amber-500 hover:text-amber-700 text-xs"><i class="fa fa-times"></i></button>
        </div>

        <!-- Quick-select toolbar -->
        <div class="flex items-center gap-3 mb-3 flex-wrap">
            <button type="button" id="btn-select-all" class="text-xs text-primary underline hover:no-underline" data-testid="btn-select-all">{% trans %}Select All{% endtrans %}</button>
            <button type="button" id="btn-select-push-only" class="text-xs text-purple-600 dark:text-purple-400 underline hover:no-underline" data-testid="btn-select-push-only">{% trans %}Select Push-Ready Only{% endtrans %}</button>
            <button type="button" id="btn-deselect-all" class="text-xs text-gray-500 underline hover:no-underline" data-testid="btn-deselect-all">{% trans %}Deselect All{% endtrans %}</button>
            <input type="text" id="recipient-search"
                   class="ml-auto px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-xs focus:ring-2 focus:ring-primary/40 outline-none w-48"
                   placeholder="{% trans %}Search users...{% endtrans %}"
                   data-testid="input-recipient-search">
        </div>

        <!-- Two-group recipient list -->
        <div id="recipient-list"
             class="max-h-96 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-xl"
             data-testid="recipient-list">
        </div>

        <!-- Pagination -->
        <div id="recipient-pagination" class="flex items-center justify-between mt-3 text-xs text-gray-500" style="display:none!important">
            <button type="button" id="btn-prev-page" class="px-3 py-1 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-40" data-testid="btn-prev-page">← {% trans %}Prev{% endtrans %}</button>
            <span id="page-label"></span>
            <button type="button" id="btn-next-page" class="px-3 py-1 rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-40" data-testid="btn-next-page">{% trans %}Next{% endtrans %} →</button>
        </div>

        <!-- Manually add users outside the current filter -->
        <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
            <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">{% trans %}Manually add a user (outside current filter){% endtrans %}</p>
            <div class="flex gap-2">
                <input type="text" id="manual-add-search"
                       class="flex-1 px-3 py-2 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-xs focus:ring-2 focus:ring-primary/40 outline-none"
                       placeholder="{% trans %}Type username or email...{% endtrans %}"
                       data-testid="input-manual-add">
                <button type="button" id="btn-manual-add"
                        class="px-3 py-2 rounded-xl bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold hover:bg-gray-300 dark:hover:bg-gray-600"
                        data-testid="btn-manual-add">{% trans %}Add{% endtrans %}</button>
            </div>
            <div id="manual-add-results" class="mt-2 space-y-1"></div>
        </div>
    </div>

    <!-- Channel selection -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
            <i class="fa fa-paper-plane text-blue-500"></i> {% trans %}Channels{% endtrans %}
        </h4>
        <div class="flex gap-6">
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="channels" value="email" id="ch-email"
                       class="rounded border-gray-300 text-primary"
                       data-testid="ch-email">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Email{% endtrans %}</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="channels" value="push" id="ch-push"
                       class="rounded border-gray-300 text-primary"
                       data-testid="ch-push">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Push notification{% endtrans %}</span>
            </label>
        </div>
    </div>

    <!-- Email fields -->
    <div id="email-fields" class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5" style="display:none">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
            <i class="fa fa-envelope text-blue-500"></i> {% trans %}Email{% endtrans %}
        </h4>
        <div class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Subject{% endtrans %}</label>
                <input type="text" name="email_subject"
                       class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                       placeholder="{% trans %}Email subject{% endtrans %}"
                       data-testid="input-email-subject">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Body (HTML){% endtrans %}</label>
                <textarea name="email_body" rows="8"
                          class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none font-mono resize-y"
                          placeholder="{% trans %}HTML email body. Use template variables listed below.{% endtrans %}"
                          data-testid="input-email-body"></textarea>
            </div>
        </div>
    </div>

    <!-- Push fields -->
    <div id="push-fields" class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5" style="display:none">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
            <i class="fa fa-bell text-purple-500"></i> {% trans %}Push Notification{% endtrans %}
        </h4>
        <div class="space-y-4">
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Title{% endtrans %}</label>
                <input type="text" name="push_title"
                       class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                       placeholder="{% trans %}Short notification title{% endtrans %}"
                       data-testid="input-push-title">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Body{% endtrans %}</label>
                <textarea name="push_body" rows="3"
                          class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none resize-y"
                          placeholder="{% trans %}Notification body text{% endtrans %}"
                          data-testid="input-push-body"></textarea>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">
                        <i class="fa fa-link text-gray-400 mr-1"></i>{% trans %}Click URL{% endtrans %}
                        <span class="font-normal text-gray-400 ml-1">{% trans %}(optional){% endtrans %}</span>
                    </label>
                    <input type="url" name="push_url"
                           class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                           placeholder="https://example.com/page">
                    <p class="text-xs text-gray-400 mt-1">{% trans %}Where to take the user when they tap the notification. Defaults to homepage.{% endtrans %}</p>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">
                        <i class="fa fa-image text-gray-400 mr-1"></i>{% trans %}Icon URL{% endtrans %}
                        <span class="font-normal text-gray-400 ml-1">{% trans %}(optional){% endtrans %}</span>
                    </label>
                    <input type="url" name="push_icon"
                           class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                           placeholder="https://example.com/icon.png">
                    <p class="text-xs text-gray-400 mt-1">{% trans %}Small icon beside the title. Defaults to the site favicon.{% endtrans %}</p>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">
                        <i class="fa fa-panorama text-gray-400 mr-1"></i>{% trans %}Banner Image URL{% endtrans %}
                        <span class="font-normal text-gray-400 ml-1">{% trans %}(optional){% endtrans %}</span>
                    </label>
                    <input type="url" name="push_image"
                           class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                           placeholder="https://example.com/banner.jpg">
                    <p class="text-xs text-gray-400 mt-1">{% trans %}Large image shown below the notification body (Chrome/Edge).{% endtrans %}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Template variable reference -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-2">
            <i class="fa fa-code text-gray-400"></i> {% trans %}Template Variables{% endtrans %}
        </h4>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
            {% for var, desc in [
                ('{{username}}', 'Username'),
                ('{{email}}', 'Email address'),
                ('{{plan_name}}', 'Plan name'),
                ('{{country}}', 'Country'),
                ('{{joined_date}}', 'Join date (YYYY-MM-DD)'),
                ('{{subscription_status}}', 'Subscription status'),
                ('{{site_name}}', 'Site name'),
            ] %}
            <div class="rounded-lg bg-gray-50 dark:bg-gray-800 p-2">
                <code class="text-xs font-mono text-primary">{{ var }}</code>
                <div class="text-xs text-gray-500 mt-0.5">{{ _(desc) }}</div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Send now / Schedule toggle -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
        <h4 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
            <i class="fa fa-clock text-teal-500"></i> {% trans %}Send Time{% endtrans %}
        </h4>
        <div class="flex gap-6 mb-4">
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="radio" name="send_mode" value="now" id="mode-now" checked
                       class="text-primary border-gray-300"
                       data-testid="mode-now">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Send now{% endtrans %}</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
                <input type="radio" name="send_mode" value="schedule" id="mode-schedule"
                       class="text-primary border-gray-300"
                       data-testid="mode-schedule">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{% trans %}Schedule for later{% endtrans %}</span>
            </label>
        </div>
        <div id="schedule-picker" style="display:none">
            <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">
                {% trans %}Send at{% endtrans %}
                <span class="font-normal text-gray-400 ml-1">{% trans %}server UTC time — enter the UTC time you want the broadcast to fire (at least 5 minutes from now){% endtrans %}</span>
            </label>
            <input type="datetime-local" name="scheduled_at" id="input-scheduled-at"
                   class="px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary/40 outline-none"
                   data-testid="input-scheduled-at">
        </div>
    </div>

    <!-- Submit -->
    <div class="flex justify-end">
        <button type="submit" id="btn-send"
                class="px-6 py-2.5 rounded-xl bg-orange-600 hover:bg-orange-700 text-white text-sm font-bold transition-all flex items-center gap-2"
                data-testid="btn-send-broadcast">
            <i class="fa fa-bullhorn" id="btn-send-icon"></i>
            <span id="btn-send-label">{% trans %}Send Broadcast{% endtrans %}</span>
        </button>
    </div>

</div>
</form>

<!-- History -->
<div class="mt-8">
    <div class="flex items-center justify-between mb-4">
        <h4 class="text-base font-bold text-gray-800 dark:text-gray-200">{% trans %}Broadcast History{% endtrans %}</h4>
        {% if history %}
        <button type="button" id="btn-clear-all"
                class="text-xs text-red-500 underline hover:no-underline"
                data-testid="btn-clear-all-history">
            {% trans %}Clear all history{% endtrans %}
        </button>
        {% endif %}
    </div>
    {% if history %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
        <table class="w-full text-sm" data-testid="history-table">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Date{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Channel{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Subject / Title{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Recipients{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Email{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Push{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Status{% endtrans %}</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400">{% trans %}Actions{% endtrans %}</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for h in history %}
                <tr data-broadcast-id="{{ h.id }}" data-testid="history-row-{{ h.id }}">
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs whitespace-nowrap">
                        {% if h.status == 'sent' and h.sent_at %}
                            <span class="text-green-600 dark:text-green-400">{{ h.sent_at[:16] }}</span>
                        {% elif h.status == 'scheduled' and h.scheduled_at %}
                            <span class="text-yellow-600 dark:text-yellow-400">⏰ {{ h.scheduled_at[:16] }}</span>
                        {% else %}
                            {{ h.created_at[:16] }}
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium
                            {% if 'email' in h.channel %}bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300{% else %}bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300{% endif %}">
                            {{ h.channel }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-700 dark:text-gray-300 max-w-xs truncate">
                        {{ h.email_subject or h.push_title or '—' }}
                    </td>
                    <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300 font-medium">{{ h.total_recipients }}</td>
                    <td class="px-4 py-3 text-center text-blue-600 dark:text-blue-400 font-medium">
                        {% if h.status == 'scheduled' %}—{% else %}{{ h.emails_sent }}{% endif %}
                    </td>
                    <td class="px-4 py-3 text-center text-purple-600 dark:text-purple-400 font-medium">
                        {% if h.status == 'scheduled' %}—{% else %}{{ h.push_sent }}{% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if h.status == 'sent' %}
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300"
                                  data-testid="status-sent-{{ h.id }}">
                                <i class="fa fa-check-circle"></i> {% trans %}Sent{% endtrans %}
                            </span>
                        {% elif h.status == 'scheduled' %}
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300"
                                  data-testid="status-scheduled-{{ h.id }}"
                                  data-scheduled-at="{{ h.scheduled_at or '' }}">
                                <i class="fa fa-clock"></i>
                                <span class="countdown-label">{% trans %}Scheduled{% endtrans %}</span>
                            </span>
                        {% elif h.status == 'cancelled' %}
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400"
                                  data-testid="status-cancelled-{{ h.id }}">
                                <i class="fa fa-ban"></i> {% trans %}Cancelled{% endtrans %}
                            </span>
                        {% elif h.status == 'missed' %}
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
                                  data-testid="status-missed-{{ h.id }}">
                                <i class="fa fa-exclamation-circle"></i> {% trans %}Missed{% endtrans %}
                            </span>
                        {% else %}
                            <span class="text-xs text-gray-400">{{ h.status }}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if h.status == 'sent' %}
                        <a href="{{ full_url('/admin/broadcast/' ~ h.id ~ '/report') }}"
                           class="inline-flex items-center gap-1 text-xs text-indigo-600 dark:text-indigo-400 underline hover:no-underline"
                           data-testid="btn-report-{{ h.id }}">
                            <i class="fa fa-chart-bar"></i> {% trans %}Report{% endtrans %}
                        </a>
                        {% elif h.status == 'scheduled' %}
                        <button type="button"
                                class="btn-cancel-broadcast text-xs text-orange-500 hover:text-orange-700 underline hover:no-underline"
                                data-id="{{ h.id }}"
                                data-testid="btn-cancel-{{ h.id }}">
                            <i class="fa fa-times-circle"></i> {% trans %}Cancel{% endtrans %}
                        </button>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <button type="button"
                                class="btn-delete-broadcast text-xs text-red-500 hover:text-red-700 underline hover:no-underline"
                                data-id="{{ h.id }}"
                                data-testid="btn-delete-{{ h.id }}">
                            {% trans %}Delete{% endtrans %}
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-8 text-center">
        <i class="fa fa-bullhorn text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
        <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}No broadcasts sent yet.{% endtrans %}</p>
    </div>
    {% endif %}
</div>

<script>
(function () {
    const _stripLang = u => u.replace(/^\/[a-z]{2}\//, '/');
    const previewUrl = _stripLang('{{ url_for("admin_broadcast_preview") }}');
    const deleteUrlBase = _stripLang('{{ url_for("admin_broadcast_delete", broadcast_id=0) }}'.replace('/0', '/'));
    const clearUrl = _stripLang('{{ url_for("admin_broadcast_clear") }}');

    const PER_PAGE = 50;
    let currentPage = 1;
    let totalPages = 1;
    let manualUsers = {};

    const AVATAR_COLORS = [
        ['bg-violet-100 dark:bg-violet-900/40', 'text-violet-700 dark:text-violet-300'],
        ['bg-teal-100 dark:bg-teal-900/40',     'text-teal-700 dark:text-teal-300'],
        ['bg-blue-100 dark:bg-blue-900/40',     'text-blue-700 dark:text-blue-300'],
        ['bg-orange-100 dark:bg-orange-900/40', 'text-orange-700 dark:text-orange-300'],
        ['bg-pink-100 dark:bg-pink-900/40',     'text-pink-700 dark:text-pink-300'],
        ['bg-emerald-100 dark:bg-emerald-900/40','text-emerald-700 dark:text-emerald-300'],
    ];
    function avatarColor(id) {
        const pair = AVATAR_COLORS[(id || 0) % AVATAR_COLORS.length];
        return pair[0] + ' ' + pair[1];
    }

    function getCheckedPlanIds() {
        return [...document.querySelectorAll('.filter-plan-cb:checked')].map(el => parseInt(el.value));
    }

    function getFilterCountries() {
        const raw = document.getElementById('filter-countries').value.trim();
        return raw ? raw.split(',').map(s => s.trim()).filter(Boolean) : [];
    }

    function escHtml(str) {
        return (str||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function makeRow(u, checked) {
        const initial = (u.username || u.email || '?')[0].toUpperCase();
        const avatarCls = avatarColor(u.id || 0);
        const pushIcon = u.has_push
            ? '<i class="fa fa-bell text-purple-400" title="Push-ready"></i>'
            : '<i class="fa fa-bell-slash text-gray-300 dark:text-gray-600" title="No push subscription"></i>';
        const emailIcon = '<i class="fa fa-envelope text-blue-400" title="Email"></i>';
        const planBadge = u.plan_name
            ? `<span class="px-1.5 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">${escHtml(u.plan_name)}</span>`
            : '';
        const country = u.country ? `<span class="text-gray-400 dark:text-gray-500 text-xs">${escHtml(u.country)}</span>` : '';
        return `<label class="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer recipient-row"
                   data-username="${escHtml((u.username||'').toLowerCase())}"
                   data-email="${escHtml((u.email||'').toLowerCase())}"
                   data-has-push="${u.has_push ? '1' : '0'}">
                <input type="checkbox" name="user_ids" value="${u.id}" ${checked ? 'checked' : ''}
                       class="rounded border-gray-300 text-primary recipient-cb shrink-0">
                <span class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold shrink-0 ${avatarCls}">${escHtml(initial)}</span>
                <span class="flex-1 min-w-0">
                    <span class="text-sm font-medium text-gray-800 dark:text-gray-200">${escHtml(u.username||'')}</span>
                    <span class="text-xs text-gray-400 ml-1.5">${escHtml(u.email||'')}</span>
                </span>
                <span class="hidden sm:flex items-center gap-1.5 shrink-0">${planBadge}${country}</span>
                <span class="flex items-center gap-1 shrink-0 ml-2">${pushIcon}${emailIcon}</span>
            </label>`;
    }

    function makeGroupHeader(label, count, colorCls, iconCls, groupId, isOpen) {
        return `<div class="group-header flex items-center gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-800/70 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10"
                     data-group="${groupId}">
                <button type="button" class="btn-toggle-group text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-xs w-4 shrink-0"
                        data-group="${groupId}" aria-expanded="${isOpen}">
                    <i class="fa fa-chevron-${isOpen ? 'down' : 'right'}"></i>
                </button>
                <i class="${iconCls} ${colorCls}"></i>
                <span class="text-xs font-semibold ${colorCls}">${escHtml(label)}</span>
                <span class="text-xs text-gray-400 font-normal">(${count})</span>
                <div class="ml-auto flex items-center gap-2">
                    <button type="button" class="btn-select-group text-xs text-primary underline hover:no-underline" data-group="${groupId}">{% trans %}All{% endtrans %}</button>
                    <button type="button" class="btn-deselect-group text-xs text-gray-400 underline hover:no-underline" data-group="${groupId}">{% trans %}None{% endtrans %}</button>
                </div>
            </div>`;
    }

    function renderRecipientList(users) {
        const list = document.getElementById('recipient-list');
        const allManual = Object.values(manualUsers);

        const pushUsers  = users.filter(u => u.has_push);
        const emailUsers = users.filter(u => !u.has_push);

        if (!users.length && !allManual.length) {
            list.innerHTML = '<p class="text-sm text-gray-500 text-center py-6">{% trans %}No matching users found.{% endtrans %}</p>';
            updateCountLabel();
            return;
        }

        let html = '';

        // Manually-added users (no group header, always at top)
        if (allManual.length) {
            html += `<div class="group-body" data-group="manual">`;
            allManual.forEach(u => { html += makeRow(u, true); });
            html += `</div>`;
        }

        // Push-Ready group
        if (pushUsers.length) {
            html += makeGroupHeader(
                '{% trans %}Push-Ready{% endtrans %}', pushUsers.length,
                'text-purple-600 dark:text-purple-400', 'fa fa-bell', 'push', true
            );
            html += `<div class="group-body" data-group="push">`;
            pushUsers.forEach(u => { html += makeRow(u, true); });
            html += `</div>`;
        }

        // Email-Only group
        if (emailUsers.length) {
            html += makeGroupHeader(
                '{% trans %}Email Only{% endtrans %}', emailUsers.length,
                'text-blue-600 dark:text-blue-400', 'fa fa-envelope', 'email', true
            );
            html += `<div class="group-body" data-group="email">`;
            emailUsers.forEach(u => { html += makeRow(u, true); });
            html += `</div>`;
        }

        // Anonymous push subscribers banner (auto-included, not selectable)
        if (anonPushTotal > 0) {
            html += `<div class="flex items-center gap-2 px-4 py-3 bg-orange-50 dark:bg-orange-900/20 border-t border-orange-200 dark:border-orange-800">
                <i class="fa fa-user-secret text-orange-500 shrink-0"></i>
                <span class="text-xs text-orange-700 dark:text-orange-300 font-medium">
                    <strong>${anonPushTotal}</strong> {% trans %}anonymous push subscriber(s) (not signed in) will automatically receive this push notification.{% endtrans %}
                </span>
            </div>`;
        }

        list.innerHTML = html;
        attachGroupHandlers();
        updateCountLabel();
        checkPushWarning();
    }

    function attachGroupHandlers() {
        document.querySelectorAll('.btn-toggle-group').forEach(btn => {
            btn.addEventListener('click', function() {
                const g = this.dataset.group;
                const body = document.querySelector(`.group-body[data-group="${g}"]`);
                const isOpen = this.getAttribute('aria-expanded') !== 'false';
                if (body) body.style.display = isOpen ? 'none' : '';
                this.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
                const icon = this.querySelector('i');
                if (icon) icon.className = `fa fa-chevron-${isOpen ? 'right' : 'down'}`;
            });
        });
        document.querySelectorAll('.btn-select-group').forEach(btn => {
            btn.addEventListener('click', function() {
                const g = this.dataset.group;
                document.querySelectorAll(`.group-body[data-group="${g}"] .recipient-cb`).forEach(cb => cb.checked = true);
                updateCountLabel();
                checkPushWarning();
            });
        });
        document.querySelectorAll('.btn-deselect-group').forEach(btn => {
            btn.addEventListener('click', function() {
                const g = this.dataset.group;
                document.querySelectorAll(`.group-body[data-group="${g}"] .recipient-cb`).forEach(cb => cb.checked = false);
                updateCountLabel();
                checkPushWarning();
            });
        });
    }

    let anonPushTotal = 0;

    function checkPushWarning() {
        const warning = document.getElementById('push-no-subs-warning');
        if (!warning) return;
        const pushChecked = document.getElementById('ch-push') && document.getElementById('ch-push').checked;
        if (!pushChecked) { warning.classList.add('hidden'); return; }
        // Count checked rows that are push-ready
        const checkedPushRows = [...document.querySelectorAll('.recipient-row')].filter(row =>
            row.dataset.hasPush === '1' && row.querySelector('.recipient-cb:checked')
        );
        // No warning if there are logged-in push subscribers selected OR anonymous push subscribers
        if (checkedPushRows.length === 0 && anonPushTotal === 0) {
            warning.classList.remove('hidden');
        } else {
            warning.classList.add('hidden');
        }
    }

    function updateStatsBar(data) {
        const bar = document.getElementById('recipient-stats');
        if (!bar) return;
        document.getElementById('stat-total').textContent      = data.total || 0;
        document.getElementById('stat-push').textContent       = data.push_total || 0;
        document.getElementById('stat-email-only').textContent = data.email_only_total || 0;
        anonPushTotal = data.anon_push_total || 0;
        document.getElementById('stat-anon-push').textContent  = anonPushTotal;
        bar.classList.remove('hidden');
    }

    function updateCountLabel() {
        const total = document.querySelectorAll('.recipient-cb').length;
        const checked = document.querySelectorAll('.recipient-cb:checked').length;
        document.getElementById('recipient-count-label').textContent = `(${checked} / ${total} {% trans %}selected{% endtrans %})`;
    }

    function updatePaginationUI(page, tPages) {
        currentPage = page;
        totalPages = tPages;
        const pag = document.getElementById('recipient-pagination');
        const label = document.getElementById('page-label');
        if (tPages > 1) {
            pag.style.cssText = '';
            label.textContent = `Page ${page} of ${tPages}`;
            document.getElementById('btn-prev-page').disabled = page <= 1;
            document.getElementById('btn-next-page').disabled = page >= tPages;
        } else {
            pag.style.cssText = 'display:none!important';
        }
    }

    async function loadPage(page) {
        const resp = await fetch(previewUrl, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
            body: JSON.stringify({
                plan_ids: getCheckedPlanIds(),
                countries: getFilterCountries(),
                page: page,
                per_page: PER_PAGE
            })
        });
        const ct = resp.headers.get('content-type') || '';
        if (!ct.includes('application/json')) {
            let snippet = '';
            try {
                const txt = await resp.text();
                const match = txt.match(/<title[^>]*>([^<]+)<\/title>/i);
                snippet = match ? match[1] : txt.replace(/<[^>]+>/g,'').trim().slice(0,120);
            } catch (_) {}
            const statusHint = resp.status === 401 ? 'Session expired — please log in again.' :
                               resp.status === 403 ? 'Access denied.' :
                               resp.status === 302 ? 'Redirected unexpectedly.' : '';
            throw new Error(statusHint || ('Unexpected response (HTTP ' + resp.status + ')' + (snippet ? ': ' + snippet : '')));
        }
        const data = await resp.json();
        if (data && data.error) {
            throw new Error(data.message || 'Server returned an error.');
        }
        return data;
    }

    document.getElementById('btn-load-recipients').addEventListener('click', async function () {
        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1.5"></i>{% trans %}Loading…{% endtrans %}';
        try {
            const data = await loadPage(1);
            updateStatsBar(data);
            renderRecipientList(data.users || []);
            updatePaginationUI(data.page || 1, data.total_pages || 1);
            document.getElementById('recipients-panel').style.display = '';
        } catch(e) {
            toastr.error(e && e.message ? e.message : '{% trans %}Failed to load recipients. Please try again.{% endtrans %}');
        }
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-search mr-1.5"></i>{% trans %}Load recipients{% endtrans %}';
    });

    document.getElementById('btn-prev-page').addEventListener('click', async function () {
        if (currentPage <= 1) return;
        const data = await loadPage(currentPage - 1);
        renderRecipientList(data.users || []);
        updatePaginationUI(data.page || 1, data.total_pages || 1);
    });

    document.getElementById('btn-next-page').addEventListener('click', async function () {
        if (currentPage >= totalPages) return;
        const data = await loadPage(currentPage + 1);
        renderRecipientList(data.users || []);
        updatePaginationUI(data.page || 1, data.total_pages || 1);
    });

    document.getElementById('btn-select-all').addEventListener('click', function () {
        document.querySelectorAll('.recipient-cb').forEach(cb => cb.checked = true);
        updateCountLabel();
        checkPushWarning();
    });

    document.getElementById('btn-select-push-only').addEventListener('click', function () {
        document.querySelectorAll('.recipient-row').forEach(row => {
            const cb = row.querySelector('.recipient-cb');
            if (cb) cb.checked = row.dataset.hasPush === '1';
        });
        updateCountLabel();
        checkPushWarning();
    });

    document.getElementById('btn-deselect-all').addEventListener('click', function () {
        document.querySelectorAll('.recipient-cb').forEach(cb => cb.checked = false);
        updateCountLabel();
        checkPushWarning();
    });

    document.getElementById('recipient-search').addEventListener('input', function () {
        const q = this.value.toLowerCase();
        document.querySelectorAll('.recipient-row').forEach(row => {
            const match = !q || row.dataset.username.includes(q) || row.dataset.email.includes(q);
            row.style.display = match ? '' : 'none';
        });
    });

    document.getElementById('recipient-list').addEventListener('change', function() {
        updateCountLabel();
        checkPushWarning();
    });

    // Manually add user outside filter
    const userSearchUrl = _stripLang('{{ url_for("admin_broadcast_user_search") }}');
    document.getElementById('btn-manual-add').addEventListener('click', async function () {
        const q = document.getElementById('manual-add-search').value.trim();
        if (!q) return;
        const resultsEl = document.getElementById('manual-add-results');
        resultsEl.innerHTML = '<span class="text-xs text-gray-400">{% trans %}Searching…{% endtrans %}</span>';
        try {
            const resp = await fetch(userSearchUrl + '?q=' + encodeURIComponent(q));
            const data = await resp.json();
            const matches = data.users || [];
            if (!matches.length) {
                resultsEl.innerHTML = '<span class="text-xs text-gray-400">{% trans %}No users found.{% endtrans %}</span>';
                return;
            }
            resultsEl.innerHTML = matches.map(u => `
                <div class="flex items-center justify-between gap-2 px-2 py-1 rounded bg-gray-50 dark:bg-gray-800">
                    <span class="text-xs text-gray-700 dark:text-gray-300 flex-1 min-w-0 truncate">${escHtml(u.username)} <span class="text-gray-400">${escHtml(u.email)}</span></span>
                    <button type="button" class="btn-add-manual text-xs text-primary underline hover:no-underline shrink-0"
                            data-user='${JSON.stringify(u).replace(/'/g,"&#39;")}'>{% trans %}Add{% endtrans %}</button>
                </div>
            `).join('');
            resultsEl.querySelectorAll('.btn-add-manual').forEach(btn => {
                btn.addEventListener('click', function () {
                    const u = JSON.parse(this.dataset.user);
                    if (!manualUsers[u.id]) {
                        manualUsers[u.id] = u;
                        const list = document.getElementById('recipient-list');
                        const manualBody = list.querySelector('.group-body[data-group="manual"]');
                        const wrap = document.createElement('div');
                        wrap.innerHTML = makeRow(u, true);
                        const newRow = wrap.firstElementChild;
                        if (manualBody) {
                            manualBody.prepend(newRow);
                        } else {
                            // create a manual group at top
                            const bodyDiv = document.createElement('div');
                            bodyDiv.className = 'group-body';
                            bodyDiv.dataset.group = 'manual';
                            bodyDiv.prepend(newRow);
                            list.prepend(bodyDiv);
                        }
                        updateCountLabel();
                        document.getElementById('recipients-panel').style.display = '';
                    }
                    this.closest('div').remove();
                });
            });
        } catch(e) {
            resultsEl.innerHTML = '<span class="text-xs text-red-500">{% trans %}Error searching users.{% endtrans %}</span>';
        }
    });

    document.getElementById('ch-email').addEventListener('change', function () {
        document.getElementById('email-fields').style.display = this.checked ? '' : 'none';
    });
    document.getElementById('ch-push').addEventListener('change', function () {
        document.getElementById('push-fields').style.display = this.checked ? '' : 'none';
        checkPushWarning();
    });

    // ── Schedule toggle ───────────────────────────────────────────────────
    const modeNow = document.getElementById('mode-now');
    const modeSched = document.getElementById('mode-schedule');
    const schedPicker = document.getElementById('schedule-picker');
    const btnSendLabel = document.getElementById('btn-send-label');
    const btnSendIcon = document.getElementById('btn-send-icon');

    function updateSendMode() {
        const isSchedule = modeSched && modeSched.checked;
        if (schedPicker) schedPicker.style.display = isSchedule ? '' : 'none';
        if (btnSendLabel) btnSendLabel.textContent = isSchedule ? 'Schedule Broadcast' : 'Send Broadcast';
        if (btnSendIcon) btnSendIcon.className = isSchedule ? 'fa fa-clock' : 'fa fa-bullhorn';
    }
    if (modeNow) modeNow.addEventListener('change', updateSendMode);
    if (modeSched) modeSched.addEventListener('change', updateSendMode);

    document.getElementById('broadcast-form').addEventListener('submit', function (e) {
        const hasRecipients = document.querySelectorAll('.recipient-cb:checked').length > 0;
        const hasChannel = document.getElementById('ch-email').checked || document.getElementById('ch-push').checked;
        if (!hasRecipients) { e.preventDefault(); toastr.warning('Please load and select at least one recipient.'); return; }
        if (!hasChannel) { e.preventDefault(); toastr.warning('Please select at least one channel.'); return; }
        const isSchedule = modeSched && modeSched.checked;
        if (isSchedule) {
            const dtInput = document.getElementById('input-scheduled-at');
            if (!dtInput || !dtInput.value) { e.preventDefault(); toastr.warning('Please pick a date and time to schedule the broadcast.'); return; }
            const pickedMs = new Date(dtInput.value).getTime();
            const minFutureMs = Date.now() + 5 * 60 * 1000;
            if (pickedMs <= minFutureMs) { e.preventDefault(); toastr.warning('Scheduled time must be at least 5 minutes in the future.'); return; }
            document.getElementById('btn-send').disabled = true;
            if (btnSendLabel) btnSendLabel.textContent = 'Scheduling…';
        } else {
            document.getElementById('btn-send').disabled = true;
            if (btnSendLabel) btnSendLabel.textContent = 'Sending…';
        }
        if (btnSendIcon) btnSendIcon.className = 'fa fa-spinner fa-spin';
    });

    // ── Cancel scheduled broadcast ────────────────────────────────────────
    document.querySelectorAll('.btn-cancel-broadcast').forEach(function (btn) {
        btn.addEventListener('click', async function () {
            const id = this.dataset.id;
            await new Promise(function(resolve, reject) { window.ocConfirm('Cancel this scheduled broadcast?\n\n\u2022 The broadcast will not be sent\n\u2022 Recipients will not receive any email', function() { resolve(); }); if (false) reject(); });
            const _cancelId = id;
            const cancelUrl = '{{ url_for("admin_broadcast_cancel", broadcast_id=0) }}'.replace('/0', '/' + id);
            try {
                const resp = await fetch(cancelUrl, {method: 'POST'});
                if (resp.ok) {
                    location.reload();
                } else {
                    toastr.error('Failed to cancel broadcast.');
                }
            } catch(e) {
                toastr.error('Error cancelling broadcast.');
            }
        });
    });

    // ── Countdown labels for scheduled broadcasts ─────────────────────────
    function formatCountdown(targetIso) {
        if (!targetIso) return 'Scheduled';
        const target = new Date(targetIso.replace(' ', 'T') + (targetIso.includes('Z') ? '' : 'Z'));
        const diffMs = target.getTime() - Date.now();
        if (diffMs <= 0) return 'Sending soon…';
        const totalSec = Math.floor(diffMs / 1000);
        const days = Math.floor(totalSec / 86400);
        const hours = Math.floor((totalSec % 86400) / 3600);
        const mins = Math.floor((totalSec % 3600) / 60);
        if (days > 0) return `Sends in ${days}d ${hours}h`;
        if (hours > 0) return `Sends in ${hours}h ${mins}m`;
        return `Sends in ${mins}m`;
    }
    function updateCountdowns() {
        document.querySelectorAll('[data-scheduled-at]').forEach(el => {
            const sa = el.dataset.scheduledAt;
            const label = el.querySelector('.countdown-label');
            if (label && sa) label.textContent = formatCountdown(sa);
        });
    }
    updateCountdowns();
    setInterval(updateCountdowns, 30000);

    document.querySelectorAll('.btn-delete-broadcast').forEach(function (btn) {
        btn.addEventListener('click', async function () {
            const id = this.dataset.id;
            await new Promise(function(resolve, reject) { window.ocConfirm('Delete this broadcast record?\n\n\u2022 The broadcast history entry will be permanently removed\n\u2022 Send statistics for this broadcast will be lost', function() { resolve(); }); if (false) reject(); });
            await fetch(deleteUrlBase + id, {method: 'POST'});
            const row = document.querySelector(`tr[data-broadcast-id="${id}"]`);
            if (row) row.remove();
        });
    });

    const clearBtn = document.getElementById('btn-clear-all');
    if (clearBtn) {
        clearBtn.addEventListener('click', async function () {
            await new Promise(function(resolve, reject) { window.ocConfirm('Delete ALL broadcast history?\n\n\u2022 All broadcast records will be permanently removed\n\u2022 All send statistics and open/click counts will be lost', function() { resolve(); }); if (false) reject(); });
            await fetch(clearUrl, {method: 'POST'});
            location.reload();
        });
    }
})();
</script>
{% endblock %}