{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}Push Notifications{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/notifications/assets/css/notifications-admin.ui.css">
{% endblock %}

{% block admin_content %}
<div id="notifications-admin-config" hidden></div>
{{ crud::shell_open(config_url="/plugins/notifications/assets/admin/page.json", mount_id="notifications-page-header", custom_mount=true) }}

<div class="flex-gap-md" data-crud-toolbar-extra data-crud-toolbar-placement="below">
    <section class="notifications-vapid-card">
        <h2>Push delivery keys</h2>
        <p>Public and Private keys are required to sign push notifications.</p>
        {% if settings.vapid_public_key %}
        <div class="notifications-vapid-status">
            <i class="fas fa-check-circle"></i> Keys Configured
        </div>
        <p class="notifications-vapid-key">Public key: {{ settings.vapid_public_key|truncate(length=20) }}...</p>
        {% else %}
        <button type="button" class="btn btn-secondary" id="generate-vapid-keys-btn">
            <i class="fas fa-key"></i> Generate Keys
        </button>
        {% endif %}
    </section>
</div>

{{ crud::shell_close() }}

<main class="notifications-admin-page" aria-label="Push notifications workspace">
    <div class="blocks-workspace-notice" data-notifications-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
    <section class="notifications-dashboard-grid" aria-label="Notification delivery summary">
        <div class="notifications-stat-card">
            <div class="notifications-stat-icon notifications-stat-icon--primary"><i class="fas fa-users" aria-hidden="true"></i></div>
            <div class="notifications-stat-content">
                <h2>Subscribers</h2>
                <p class="notifications-stat-value" id="stat-subscribers">—</p>
            </div>
        </div>
        <div class="notifications-stat-card">
            <div class="notifications-stat-icon notifications-stat-icon--success"><i class="fas fa-paper-plane" aria-hidden="true"></i></div>
            <div class="notifications-stat-content">
                <h2>Notifications sent</h2>
                <p class="notifications-stat-value" id="stat-sent">—</p>
            </div>
        </div>
        <div class="notifications-stat-card">
            <div class="notifications-stat-icon notifications-stat-icon--info"><i class="fas fa-layer-group" aria-hidden="true"></i></div>
            <div class="notifications-stat-content">
                <h2>User groups</h2>
                <p class="notifications-stat-value" id="stat-groups">—</p>
            </div>
        </div>
    </section>

<div id="notifications-tabs-wrapper" data-blocks-admin-tabs>
    <div id="notifications-tabs-container" class="mb-4">
        <div class="notifications-tab-list" role="tablist" aria-label="Notification reports">
            <button type="button" class="notifications-tab tab-btn active" data-tab="history" role="tab" aria-selected="true" aria-controls="pane-history" id="notifications-tab-history" tabindex="0">
                <i class="fas fa-history"></i> Recent History
            </button>
            <button type="button" class="notifications-tab tab-btn" data-tab="subscribers" role="tab" aria-selected="false" aria-controls="pane-subscribers" id="notifications-tab-subscribers" tabindex="-1">
                <i class="fas fa-users-cog"></i> Subscribers & Diagnostic Status
            </button>
        </div>
    </div>

    <div class="tab-content">
        <div id="pane-history" class="notifications-panel tab-pane active" role="tabpanel" aria-labelledby="notifications-tab-history" tabindex="0">
            {{ crud::shell_open(config_url="/plugins/notifications/assets/admin/history_list.json", mount_id="notification-history-list", custom_mount=true) }}
            <table>
                <thead></thead>
                <tbody>
                    <tr><td colspan="5" class="crud-empty-state text-center">Loading history…</td></tr>
                </tbody>
            </table>
            {{ crud::shell_close() }}
        </div>

        <div id="pane-subscribers" class="notifications-panel tab-pane hidden" role="tabpanel" aria-labelledby="notifications-tab-subscribers" tabindex="0" hidden>
            {{ crud::shell_open(config_url="/plugins/notifications/assets/admin/subscribers_list.json", mount_id="notification-subscribers-status-list", custom_mount=true) }}
            <table>
                <thead></thead>
                <tbody>
                    <tr><td colspan="3" class="crud-empty-state text-center">Loading subscriber statuses…</td></tr>
                </tbody>
            </table>
            {{ crud::shell_close() }}
        </div>
    </div>
</div>
<div id="sendModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="send-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="send-modal-title">Send Manual Notification</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div class="blocks-workspace-notice" data-notifications-send-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
            <div id="send-notification-form-fields"></div>
        </div>
    </div>
</div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/notifications/assets/js/channels_list.js"></script>
<script src="/plugins/notifications/assets/js/notifications-admin.js"></script>
{% endblock %}