{% extends "base.html" %}
{% block title %}Groups — Shoreguard{% endblock %}

{% block breadcrumbs %}
<ol class="breadcrumb mb-0">
    <li class="breadcrumb-item active">Groups</li>
</ol>
{% endblock %}

{% block content %}
<div x-data="groupsListPage" x-init="load()">
    <!-- Loading -->
    <div x-show="loading" class="text-center text-muted py-5">
        <div class="spinner-border spinner-border-sm me-2"></div>Loading...
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="alert alert-danger" x-text="error"></div>

    <!-- Content -->
    <template x-if="!loading && !error">
        <div>
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0"><i class="bi bi-collection me-2"></i>Groups</h5>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-secondary" @click="load()" title="Refresh" aria-label="Refresh">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                    <button class="btn btn-outline-success" @click="showCreate = !showCreate">
                        <i class="bi bi-plus-lg me-1"></i>New Group
                    </button>
                </div>
            </div>

            <!-- Create Form (inline) -->
            <div x-show="showCreate" x-cloak class="card bg-dark border-secondary mb-3">
                <div class="card-body">
                    <div x-show="createError" class="alert alert-danger py-1 small" x-text="createError"></div>
                    <div class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label small text-muted mb-1">Name</label>
                            <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                                   x-model="newName" placeholder="e.g. dev-team" @keydown.enter="createGroup()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small text-muted mb-1">Global Role</label>
                            <select class="form-select form-select-sm bg-dark text-light border-secondary" x-model="newRole">
                                <option value="admin">admin</option>
                                <option value="operator">operator</option>
                                <option value="viewer" selected>viewer</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted mb-1">Description</label>
                            <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                                   x-model="newDesc" placeholder="Optional">
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-success w-100" @click="createGroup()">
                                <i class="bi bi-plus-lg me-1"></i>Create
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter -->
            <template x-if="$notEmpty(groups)">
                <div class="mb-2">
                    <input type="text" class="form-control form-control-sm sg-mw-300" placeholder="Filter groups..."
                           x-model="_filterText">
                </div>
            </template>

            <!-- Groups Table -->
            <template x-if="$notEmpty(groups)">
                <div class="table-responsive">
                    <table class="table table-striped table-sm align-middle">
                        <thead>
                            <tr>
                                <th :class="sortClass('name')" @click="sortBy('name')">Name</th>
                                <th :class="sortClass('role')" @click="sortBy('role')">Global Role</th>
                                <th :class="sortClass('member_count')" @click="sortBy('member_count')">Members</th>
                                <th class="d-none d-md-table-cell">Description</th>
                                <th class="d-none d-md-table-cell" :class="sortClass('created_at')" @click="sortBy('created_at')">Created</th>
                                <th class="text-end sg-w-120">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="g in sorted(filtered(groups, 'name', 'description', 'role'))" :key="g.id">
                                <tr>
                                    <td><strong x-text="g.name"></strong></td>
                                    <td><span class="badge" :class="roleBadge(g.role)" x-text="g.role"></span></td>
                                    <td>
                                        <span class="badge text-bg-info" x-text="g.member_count"></span>
                                    </td>
                                    <td class="d-none d-md-table-cell small text-muted"
                                        x-text="g.description || '\u2014'"></td>
                                    <td class="d-none d-md-table-cell small text-muted"
                                        x-text="formatDate(g.created_at)"></td>
                                    <td class="text-end">
                                        <button class="btn btn-sm text-muted" @click="showMembers(g)" title="Members">
                                            <i class="bi bi-people"></i>
                                        </button>
                                        <button class="btn btn-sm text-muted" @click="showGatewayRoles(g)" title="Gateway Roles">
                                            <i class="bi bi-shield-lock"></i>
                                        </button>
                                        <button class="btn btn-sm text-muted" @click="startEdit(g)" title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm text-muted delete-btn" @click="deleteGroup(g)" title="Delete">
                                            <i class="bi bi-trash3"></i>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>

            <!-- Empty -->
            <template x-if="$empty(groups)">
                <div class="text-center text-muted py-5">
                    <i class="bi bi-collection fs-1 d-block mb-3"></i>
                    <p>No groups yet.</p>
                    <button class="btn btn-success btn-sm" @click="showCreate = true">
                        <i class="bi bi-plus me-1"></i>Create Group
                    </button>
                </div>
            </template>
        </div>
    </template>

    <!-- Edit Group Modal -->
    <div class="modal fade" id="editGroupModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content sg-modal-themed">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title"><i class="bi bi-pencil me-2"></i>Edit Group</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div x-show="editError" class="alert alert-danger py-1 small" x-text="editError"></div>
                    <div class="mb-3">
                        <label class="form-label small">Name</label>
                        <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                               x-model="editName">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Global Role</label>
                        <select class="form-select form-select-sm bg-dark text-light border-secondary" x-model="editRole">
                            <option value="admin">admin</option>
                            <option value="operator">operator</option>
                            <option value="viewer">viewer</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small">Description</label>
                        <input type="text" class="form-control form-control-sm bg-dark text-light border-secondary"
                               x-model="editDesc">
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-success" @click="saveEdit()">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Members Modal -->
    <div class="modal fade" id="membersModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content sg-modal-themed">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title">
                        <i class="bi bi-people me-2"></i>Members:
                        <span x-text="$prop(membersGroup, 'name')"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div x-show="membersLoading" class="text-center text-muted py-3">
                        <div class="spinner-border spinner-border-sm me-2"></div>Loading...
                    </div>

                    <template x-if="!membersLoading">
                        <div>
                            <!-- Member list -->
                            <template x-if="$notEmpty(members)">
                                <div class="table-responsive mb-3">
                                    <table class="table table-striped table-sm align-middle">
                                        <thead>
                                            <tr>
                                                <th>Email</th>
                                                <th>Global Role</th>
                                                <th class="text-end sg-w-60"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template x-for="m in members" :key="m.id">
                                                <tr>
                                                    <td x-text="m.email"></td>
                                                    <td><span class="badge" :class="roleBadge(m.role)" x-text="m.role"></span></td>
                                                    <td class="text-end">
                                                        <button class="btn btn-sm text-muted delete-btn"
                                                                @click="removeMember(m.id)" title="Remove">
                                                            <i class="bi bi-x-lg"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </template>
                            <template x-if="$empty(members)">
                                <p class="text-muted mb-3">No members yet.</p>
                            </template>

                            <!-- Add member -->
                            <template x-if="$notEmpty(allUsers)">
                                <div class="card bg-dark border-secondary">
                                    <div class="card-body py-2">
                                        <div class="row g-2 align-items-end">
                                            <div class="col">
                                                <label class="form-label small text-muted mb-1">Add User</label>
                                                <select id="add-member-select"
                                                        class="form-select form-select-sm bg-dark text-light border-secondary">
                                                    <template x-for="u in allUsers" :key="u.id">
                                                        <option :value="u.id" x-text="u.email"></option>
                                                    </template>
                                                </select>
                                            </div>
                                            <div class="col-auto">
                                                <button class="btn btn-sm btn-outline-success" @click="addMember()">
                                                    <i class="bi bi-plus-lg me-1"></i>Add
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
                <div class="modal-footer border-0">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/users.js"></script>
<script src="/static/js/groups.js"></script>
{% endblock %}