{% extends "admin_base.html" %}

{% block page_title %}WhatsApp Recipient Groups{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-6xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
    <header class="space-y-2">
        <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">Recipient Groups</h1>
        <p class="max-w-3xl text-sm text-muted sm:text-base">Arrange customers into groups, then broadcast WhatsApp messages to a group.</p>
    </header>

    <section class="blocks-card space-y-5" aria-labelledby="mc-groups-heading">
        <div><h2 id="mc-groups-heading" class="text-lg font-semibold">Groups</h2><p class="mt-1 text-sm text-muted">Create a group, then use Members to add customers.</p></div>
        <form id="mc-group-form" class="grid grid-cols-1 items-end gap-4 md:grid-cols-2 xl:grid-cols-[1fr_2fr_auto_auto]">
            <input type="hidden" id="mc-group-id" value="">
            <div class="space-y-2"><label for="mc-group-name" class="blocks-label">Group name</label><input type="text" id="mc-group-name" class="blocks-input" placeholder="e.g., VIP Customers" required></div>
            <div class="space-y-2"><label for="mc-group-desc" class="blocks-label">Description</label><input type="text" id="mc-group-desc" class="blocks-input" placeholder="Optional description"></div>
            <button type="submit" class="blocks-button blocks-button-primary" id="mc-group-save-btn">Create group</button>
            <button type="button" class="blocks-button blocks-button-secondary hidden" id="mc-group-cancel-btn">Cancel</button>
        </form>
        <div class="blocks-workspace-notice" data-workspace-notice role="status" aria-live="polite" tabindex="-1" hidden></div>
        <div id="mc-groups-list" class="overflow-x-auto" aria-live="polite"><p class="text-sm text-muted">Loading groups…</p></div>
    </section>

    <section class="blocks-card hidden space-y-5" id="mc-members-card" aria-labelledby="mc-members-title">
        <div><h2 id="mc-members-title" class="text-lg font-semibold">Members</h2><p class="mt-1 text-sm text-muted">Search for customers to add them to this group.</p></div>
        <div class="max-w-2xl space-y-2"><label for="mc-user-search" class="blocks-label">Add customers (search by name, email or phone)</label><input type="search" id="mc-user-search" class="blocks-input" placeholder="Type to search users…" autocomplete="off"><div id="mc-user-results" class="hidden max-h-60 overflow-y-auto rounded-lg border border-border bg-card" role="listbox" aria-label="Customer search results"></div></div>
        <div id="mc-members-list" class="overflow-x-auto" aria-live="polite"><p class="text-sm text-muted">Loading members…</p></div>
    </section>
</main>

<script src="/plugins/meta-cloud/assets/js/meta_cloud_groups.js"></script>
{% endblock %}