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

{% block page_title %}User Groups{% endblock %}

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

{% block admin_content %}
<main class="notifications-groups-page" data-plugin="notifications" aria-labelledby="notifications-groups-title">
<header class="notifications-workspace-heading"><h1 id="notifications-groups-title">User groups</h1><p>Organize subscribers so you can send relevant notifications to the right people.</p></header>
{{ crud::shell_open(config_url="/plugins/notifications/assets/admin/groups_list.json", mount_id="notification-groups-list", custom_mount=true) }}

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

{{ crud::shell_close() }}

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

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