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

{% block page_title %}Event Triggers{% endblock %}

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

{% block admin_content %}
<main class="notifications-events-page" data-plugin="notifications" aria-labelledby="notifications-events-title">
<header class="notifications-workspace-heading"><h1 id="notifications-events-title">Event triggers</h1><p>Choose which platform events send push notifications and customize their messages.</p></header>
{{ crud::shell_open(config_url="/plugins/notifications/assets/admin/events_list.json", mount_id="notification-events-list", custom_mount=true) }}

<table>
    <thead></thead>
    <tbody>
        <tr><td colspan="4" class="crud-empty-state text-center">Loading events…</td></tr>
    </tbody>
</table>

<section id="notifications-template-vars" class="notifications-template-vars" data-crud-list-footer aria-labelledby="notifications-template-vars-title">
    <div class="notifications-template-vars-header">
        <h2 id="notifications-template-vars-title">Template variables</h2>
    </div>
    <div class="notifications-template-vars-body">
        <p>You can use Tera templates in title and body. Example payload variables for <code>order.*</code> events:</p>
        <ul class="notifications-template-vars-list">
            <li><code>&#123;&#123;payload.order_number&#125;&#125;</code> — Order number</li>
            <li><code>&#123;&#123;payload.total&#125;&#125;</code> — Order total</li>
            <li><code>&#123;&#123;payload.status&#125;&#125;</code> — New status</li>
            <li><code>&#123;&#123;payload.id&#125;&#125;</code> — Database ID</li>
        </ul>
    </div>
</section>

{{ crud::shell_close() }}

<div id="eventModal" class="crud-modal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-content notifications-event-modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">Configure Event Trigger</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div class="blocks-workspace-notice" data-event-form-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
            <div id="event-form-fields"></div>
        </div>
    </div>
</div>
</main>
{% endblock %}

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