{% extends "base/layout.html" %}

{% block page_actions %}
<a href="#" class="btn btn-primary" onclick="showCreatePermissionModal()">
    <i class="bi bi-key me-2"></i>Add Permission
</a>
{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- Search Form -->
    <div class="search-form">
        <form method="GET" class="row g-3">
            <div class="col-md-6">
                <label for="search" class="form-label">Search Permissions</label>
                <input type="text" class="form-control" id="search" name="search" value="{{ search }}"
                    placeholder="Search by name, code, or description...">
            </div>
            <div class="col-md-2">
                <label for="permission_type" class="form-label">Type</label>
                <select class="form-select" name="permission_type" id="permission_type">
                    <option value="">All Types</option>
                    <option value="read">Read</option>
                    <option value="write">Write</option>
                    <option value="delete">Delete</option>
                    <option value="admin">Admin</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="size" class="form-label">Per Page</label>
                <select class="form-select" name="size" id="size">
                    <option value="10" {% if pagination.size==10 %}selected{% endif %}>10</option>
                    <option value="20" {% if pagination.size==20 %}selected{% endif %}>20</option>
                    <option value="50" {% if pagination.size==50 %}selected{% endif %}>50</option>
                    <option value="100" {% if pagination.size==100 %}selected{% endif %}>100</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">&nbsp;</label>
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search me-1"></i>Search
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- Results Info -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="text-muted">
            Showing {{ ((pagination.page - 1) * pagination.size) + 1 }} to
            {{ (pagination.page * pagination.size) if (pagination.page * pagination.size) < pagination.total else
                pagination.total }} of {{ pagination.total }} permissions </div>
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-outline-secondary" onclick="selectAll()">
                        <i class="bi bi-check-all me-1"></i>Select All
                    </button>
                    <button type="button" class="btn btn-outline-secondary" onclick="clearSelection()">
                        <i class="bi bi-x-square me-1"></i>Clear
                    </button>
                </div>
        </div>

        <!-- Permissions Table -->
        <div class="card">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th width="40">
                                <input type="checkbox" class="form-check-input" id="selectAllCheckbox">
                            </th>
                            <th>Permission Code</th>
                            <th>Name</th>
                            <th>Resource</th>
                            <th>Action</th>
                            <th>Roles</th>
                            <th>Status</th>
                            <th>Type</th>
                            <th width="150">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for permission in permissions %}
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input permission-checkbox"
                                    value="{{ permission.id }}">
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center me-2"
                                        style="width: 32px; height: 32px;">
                                        <i class="bi bi-key"></i>
                                    </div>
                                    <div>
                                        <code class="fw-bold">{{ permission.code }}</code>
                                        {% if permission.is_system %}
                                        <div>
                                            <small class="text-warning">
                                                <i class="bi bi-star-fill me-1"></i>System Permission
                                            </small>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="fw-bold">{{ permission.name }}</div>
                                {% if permission.description %}
                                <small class="text-muted text-truncate-custom d-block">
                                    {{ permission.description }}
                                </small>
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge bg-info bg-opacity-10 text-info">
                                    {{ permission.resource or 'General' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-secondary bg-opacity-10 text-secondary">
                                    {{ permission.action or 'Any' }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-success bg-opacity-10 text-success me-2">
                                        {{ permission_role_counts[permission.id] if permission_role_counts[permission.id] else 0 }}
                                    </span>
                                    <span class="small text-muted">roles</span>
                                </div>
                            </td>
                            <td>
                                {% if permission.is_active %}
                                <span class="badge bg-success badge-status">Active</span>
                                {% else %}
                                <span class="badge bg-secondary badge-status">Inactive</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if permission.is_system %}
                                <span class="badge bg-warning badge-status">System</span>
                                {% else %}
                                <span class="badge bg-primary badge-status">Custom</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group-action">
                                    <a href="#" class="btn btn-outline-success btn-action btn-sm"
                                        title="Edit Permission" data-action="edit-permission"
                                        data-permission-id="{{ permission.id }}"
                                        data-permission-code="{{ permission.code }}"
                                        data-permission-name="{{ permission.name }}"
                                        data-permission-description="{{ permission.description or '' }}"
                                        data-permission-active="{{ permission.is_active|lower }}"
                                        data-permission-system="{{ permission.is_system|lower }}">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-info btn-action btn-sm"
                                        title="Manage Roles" data-action="manage-roles"
                                        data-permission-id="{{ permission.id }}"
                                        data-permission-name="{{ permission.name }}">
                                        <i class="bi bi-person-badge"></i>
                                    </button>
                                    {% if not permission.is_system %}
                                    <button type="button" class="btn btn-outline-danger btn-action btn-sm"
                                        title="Delete Permission" data-action="delete-permission"
                                        data-permission-id="{{ permission.id }}"
                                        data-permission-code="{{ permission.code }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="9" class="text-center py-5 text-muted">
                                <i class="bi bi-key-fill" style="font-size: 3rem;"></i>
                                <p class="mt-3 mb-0">No permissions found</p>
                                {% if search %}
                                <p class="small">Try adjusting your search criteria</p>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        {% if pagination.pages > 1 %}
        <nav aria-label="Permission pagination" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page=1&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-double-left"></i>
                    </a>
                </li>
                <li class="page-item {% if pagination.page <= 1 %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.page - 1 }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>

                {% for page_num in range(max(1, pagination.page - 2), min(pagination.pages + 1, pagination.page + 3)) %}
                <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
                    <a class="page-link"
                        href="?page={{ page_num }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        {{ page_num }}
                    </a>
                </li>
                {% endfor %}

                <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.page + 1 }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                <li class="page-item {% if pagination.page >= pagination.pages %}disabled{% endif %}">
                    <a class="page-link"
                        href="?page={{ pagination.pages }}&size={{ pagination.size }}{% if search %}&search={{ search }}{% endif %}">
                        <i class="bi bi-chevron-double-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
        {% endif %}
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete permission <strong id="deletePermissionCode"></strong>?</p>
                    <p class="text-danger small mb-0">This action cannot be undone and will remove this permission from
                        all assigned roles.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete Permission</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Manage Roles Modal -->
    <div class="modal fade" id="manageRolesModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-person-badge me-2"></i>
                        Manage Roles - <span id="manageRolesPermissionName"></span>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger d-none" id="manageRolesError"></div>
                    <div class="alert alert-success d-none" id="manageRolesSuccess"></div>
                    
                    <!-- Loading State -->
                    <div class="text-center py-4 d-none" id="manageRolesLoading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3 mb-0">Loading role data...</p>
                    </div>

                    <!-- Role Management Content -->
                    <div id="manageRolesContent" class="d-none">
                        <!-- Current Roles Summary -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="bi bi-check-circle text-success me-2"></i>
                                            Assigned Roles
                                        </h6>
                                        <p class="card-text">
                                            <span class="badge bg-success fs-6" id="assignedRolesCount">0</span>
                                            <span class="text-muted ms-2">roles assigned to this permission</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="bi bi-list-ul text-info me-2"></i>
                                            Available Roles
                                        </h6>
                                        <p class="card-text">
                                            <span class="badge bg-info fs-6" id="availableRolesCount">0</span>
                                            <span class="text-muted ms-2">total roles available</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Search and Filter -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-search"></i>
                                    </span>
                                    <input type="text" class="form-control" id="roleSearchInput" 
                                           placeholder="Search roles by name or description...">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <select class="form-select" id="roleFilterSelect">
                                    <option value="all">All Roles</option>
                                    <option value="assigned">Assigned Only</option>
                                    <option value="unassigned">Unassigned Only</option>
                                    <option value="system">System Roles</option>
                                    <option value="custom">Custom Roles</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <div class="btn-group w-100" role="group">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="selectAllRolesBtn">
                                        <i class="bi bi-check-all me-1"></i>Select All
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="clearSelectionBtn">
                                        <i class="bi bi-x-square me-1"></i>Clear
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Roles List -->
                        <div class="row" id="rolesListContainer">
                            <!-- Roles will be populated here by JavaScript -->
                        </div>

                        <!-- Bulk Actions -->
                        <div class="row mt-4" id="bulkActionsContainer" style="display: none;">
                            <div class="col-12">
                                <div class="card border-warning">
                                    <div class="card-body">
                                        <h6 class="card-title text-warning">
                                            <i class="bi bi-exclamation-triangle me-2"></i>
                                            Bulk Actions
                                        </h6>
                                        <p class="card-text mb-3">
                                            <span id="selectedRolesCount">0</span> roles selected
                                        </p>
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-success" id="bulkAssignBtn">
                                                <i class="bi bi-plus-circle me-1"></i>
                                                Assign Selected
                                            </button>
                                            <button type="button" class="btn btn-danger" id="bulkRemoveBtn">
                                                <i class="bi bi-dash-circle me-1"></i>
                                                Remove Selected
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveRolesBtn" style="display: none;">
                        <span class="spinner-border spinner-border-sm d-none me-2" id="saveRolesSpinner"></span>
                        Save Changes
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Permission Modal -->
    <div class="modal fade" id="editPermissionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Permission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editPermissionForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="editPermissionError"></div>
                        <input type="hidden" id="editPermissionId" name="id">
                        <div class="mb-3">
                            <label for="editPermissionCode" class="form-label">Permission Code <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editPermissionCode" name="code" required
                                maxlength="100">
                            <div class="form-text">Unique permission identifier, typically in format 'resource:action'
                            </div>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="editPermissionName" class="form-label">Permission Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editPermissionName" name="name" required
                                maxlength="100">
                            <div class="form-text">Human-readable permission name</div>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="editPermissionDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="editPermissionDescription" name="description" rows="3"
                                maxlength="500"></textarea>
                            <div class="form-text">Optional description of what this permission allows</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editPermissionActive"
                                    name="is_active">
                                <label class="form-check-label" for="editPermissionActive">
                                    Active
                                </label>
                                <div class="form-text">Whether this permission is active and can be assigned</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editPermissionSystem"
                                    name="is_system" disabled>
                                <label class="form-check-label" for="editPermissionSystem">
                                    System Permission
                                </label>
                                <div class="form-text">System permission status cannot be changed after creation</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="editPermissionBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2"
                                id="editPermissionSpinner"></span>
                            Update Permission
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Create Permission Modal -->
    <div class="modal fade" id="createPermissionModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Permission</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="createPermissionForm">
                    <div class="modal-body">
                        <div class="alert alert-danger d-none" id="createPermissionError"></div>
                        <div class="mb-3">
                            <label for="createPermissionCode" class="form-label">Permission Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="createPermissionCode" name="code" required maxlength="100">
                            <div class="form-text">Unique permission identifier, typically in format 'resource:action'</div>
                        </div>
                        <div class="mb-3">
                            <label for="createPermissionName" class="form-label">Permission Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="createPermissionName" name="name" required maxlength="100">
                            <div class="form-text">Human-readable permission name</div>
                        </div>
                        <div class="mb-3">
                            <label for="createPermissionDescription" class="form-label">Description</label>
                            <textarea class="form-control" id="createPermissionDescription" name="description" rows="3" maxlength="500"></textarea>
                            <div class="form-text">Optional description of what this permission allows</div>
                        </div>
                        <div class="mb-3">
                            <label for="createPermissionResource" class="form-label">Resource</label>
                            <input type="text" class="form-control" id="createPermissionResource" name="resource" maxlength="100">
                            <div class="form-text">Resource this permission applies to (optional)</div>
                        </div>
                        <div class="mb-3">
                            <label for="createPermissionAction" class="form-label">Action</label>
                            <input type="text" class="form-control" id="createPermissionAction" name="action" maxlength="100">
                            <div class="form-text">Action this permission allows (optional)</div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="createPermissionActive" name="is_active" checked>
                                <label class="form-check-label" for="createPermissionActive">Active</label>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="createPermissionBtn">
                            <span class="spinner-border spinner-border-sm d-none me-2" id="createPermissionSpinner"></span>
                            Create Permission
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endblock %}

    {% block extra_scripts %}
    <script>
        let selectedPermissionId = null;

        function selectAll() {
            const checkboxes = document.querySelectorAll('.permission-checkbox');
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            checkboxes.forEach(cb => cb.checked = true);
            selectAllCheckbox.checked = true;
        }

        function clearSelection() {
            const checkboxes = document.querySelectorAll('.permission-checkbox');
            const selectAllCheckbox = document.getElementById('selectAllCheckbox');
            checkboxes.forEach(cb => cb.checked = false);
            selectAllCheckbox.checked = false;
        }

        function confirmDelete(permissionId, permissionCode) {
            selectedPermissionId = permissionId;
            document.getElementById('deletePermissionCode').textContent = permissionCode;
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }

        let currentPermissionId = null;
        let allRolesData = [];
        let selectedRoles = new Set();

        function showManageRolesModal(permissionId, permissionName) {
            currentPermissionId = permissionId;
            document.getElementById('manageRolesPermissionName').textContent = permissionName;
            
            // Reset modal state
            resetManageRolesModal();
            
            // Show loading state
            document.getElementById('manageRolesLoading').classList.remove('d-none');
            document.getElementById('manageRolesContent').classList.add('d-none');
            document.getElementById('manageRolesError').classList.add('d-none');
            document.getElementById('manageRolesSuccess').classList.add('d-none');
            
            const modal = new bootstrap.Modal(document.getElementById('manageRolesModal'));
            modal.show();
            
            // Load role data
            loadPermissionRoleData(permissionId);
        }

        function resetManageRolesModal() {
            allRolesData = [];
            selectedRoles.clear();
            document.getElementById('rolesListContainer').innerHTML = '';
            document.getElementById('bulkActionsContainer').style.display = 'none';
            document.getElementById('selectedRolesCount').textContent = '0';
            document.getElementById('roleSearchInput').value = '';
            document.getElementById('roleFilterSelect').value = 'all';
        }

        async function loadPermissionRoleData(permissionId) {
            try {
                const response = await fetch(`{{ frontend_prefix }}/permissions/${permissionId}/manage-roles`);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                allRolesData = data.all_roles;
                
                // Update counts
                document.getElementById('assignedRolesCount').textContent = data.current_role_count;
                document.getElementById('availableRolesCount').textContent = data.all_roles.length;
                
                // Hide loading, show content
                document.getElementById('manageRolesLoading').classList.add('d-none');
                document.getElementById('manageRolesContent').classList.remove('d-none');
                
                // Render roles
                renderRolesList();
                
            } catch (error) {
                console.error('Error loading role data:', error);
                document.getElementById('manageRolesLoading').classList.add('d-none');
                showManageRolesError('Failed to load role data: ' + error.message);
            }
        }

        function renderRolesList() {
            const container = document.getElementById('rolesListContainer');
            const searchTerm = document.getElementById('roleSearchInput').value.toLowerCase();
            const filterValue = document.getElementById('roleFilterSelect').value;
            
            // Filter roles
            let filteredRoles = allRolesData.filter(role => {
                const matchesSearch = !searchTerm || 
                    role.name.toLowerCase().includes(searchTerm) ||
                    (role.description && role.description.toLowerCase().includes(searchTerm));
                
                const matchesFilter = filterValue === 'all' ||
                    (filterValue === 'assigned' && role.is_assigned) ||
                    (filterValue === 'unassigned' && !role.is_assigned) ||
                    (filterValue === 'system' && role.is_system) ||
                    (filterValue === 'custom' && !role.is_system);
                
                return matchesSearch && matchesFilter;
            });
            
            if (filteredRoles.length === 0) {
                container.innerHTML = `
                    <div class="col-12">
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-search" style="font-size: 2rem;"></i>
                            <p class="mt-3 mb-0">No roles found matching your criteria</p>
                        </div>
                    </div>
                `;
                return;
            }
            
            // Render role cards
            container.innerHTML = filteredRoles.map(role => `
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="card h-100 role-card ${role.is_assigned ? 'border-success' : 'border-light'}" 
                         data-role-id="${role.id}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="form-check">
                                    <input class="form-check-input role-checkbox" type="checkbox" 
                                           value="${role.id}" id="role-${role.id}"
                                           ${role.is_assigned ? 'checked' : ''}>
                                    <label class="form-check-label fw-bold" for="role-${role.id}">
                                        ${role.name}
                                    </label>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                                            data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item ${role.is_assigned ? 'text-danger' : 'text-success'}" 
                                               href="#" onclick="toggleRoleAssignment(${role.id}, ${!role.is_assigned})">
                                                <i class="bi bi-${role.is_assigned ? 'dash-circle' : 'plus-circle'} me-2"></i>
                                                ${role.is_assigned ? 'Remove' : 'Assign'}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            
                            ${role.description ? `
                                <p class="card-text text-muted small mb-2">
                                    ${role.description}
                                </p>
                            ` : ''}
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    ${role.is_system ? 
                                        '<span class="badge bg-warning text-dark">System</span>' : 
                                        '<span class="badge bg-primary">Custom</span>'
                                    }
                                </div>
                                <div>
                                    ${role.is_assigned ? 
                                        '<span class="badge bg-success">Assigned</span>' : 
                                        '<span class="badge bg-secondary">Available</span>'
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
            
            // Add event listeners to checkboxes
            container.querySelectorAll('.role-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', handleRoleSelection);
            });
        }

        function handleRoleSelection(event) {
            const roleId = parseInt(event.target.value);
            const isChecked = event.target.checked;
            
            if (isChecked) {
                selectedRoles.add(roleId);
            } else {
                selectedRoles.delete(roleId);
            }
            
            updateBulkActions();
        }

        function updateBulkActions() {
            const count = selectedRoles.size;
            const container = document.getElementById('bulkActionsContainer');
            const countElement = document.getElementById('selectedRolesCount');
            
            countElement.textContent = count;
            
            if (count > 0) {
                container.style.display = 'block';
            } else {
                container.style.display = 'none';
            }
        }

        async function toggleRoleAssignment(roleId, shouldAssign) {
            try {
                if (shouldAssign) {
                    // Assign role
                    const response = await fetch(`{{ frontend_prefix }}/permissions/${currentPermissionId}/assign-roles`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify([roleId])
                    });
                    
                    if (!response.ok) {
                        throw new Error(`Failed to assign role: ${response.status}`);
                    }
                    
                    showManageRolesSuccess('Role assigned successfully');
                } else {
                    // Remove role
                    const response = await fetch(`{{ frontend_prefix }}/permissions/${currentPermissionId}/remove-role/${roleId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    });
                    
                    if (!response.ok) {
                        throw new Error(`Failed to remove role: ${response.status}`);
                    }
                    
                    showManageRolesSuccess('Role removed successfully');
                }
                
                // Reload data
                await loadPermissionRoleData(currentPermissionId);
                
            } catch (error) {
                console.error('Error toggling role assignment:', error);
                showManageRolesError('Failed to update role assignment: ' + error.message);
            }
        }

        async function bulkAssignRoles() {
            const roleIds = Array.from(selectedRoles);
            if (roleIds.length === 0) return;
            
            try {
                const response = await fetch(`{{ frontend_prefix }}/permissions/${currentPermissionId}/assign-roles`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(roleIds)
                });
                
                if (!response.ok) {
                    throw new Error(`Failed to assign roles: ${response.status}`);
                }
                
                showManageRolesSuccess(`Successfully assigned ${roleIds.length} roles`);
                selectedRoles.clear();
                await loadPermissionRoleData(currentPermissionId);
                
            } catch (error) {
                console.error('Error bulk assigning roles:', error);
                showManageRolesError('Failed to assign roles: ' + error.message);
            }
        }

        async function bulkRemoveRoles() {
            const roleIds = Array.from(selectedRoles);
            if (roleIds.length === 0) return;
            
            try {
                // Remove roles one by one (since the API doesn't support bulk remove)
                const promises = roleIds.map(roleId => 
                    fetch(`{{ frontend_prefix }}/permissions/${currentPermissionId}/remove-role/${roleId}`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    })
                );
                
                const responses = await Promise.all(promises);
                const failedCount = responses.filter(r => !r.ok).length;
                
                if (failedCount > 0) {
                    throw new Error(`${failedCount} roles failed to remove`);
                }
                
                showManageRolesSuccess(`Successfully removed ${roleIds.length} roles`);
                selectedRoles.clear();
                await loadPermissionRoleData(currentPermissionId);
                
            } catch (error) {
                console.error('Error bulk removing roles:', error);
                showManageRolesError('Failed to remove roles: ' + error.message);
            }
        }

        function showManageRolesError(message) {
            const errorDiv = document.getElementById('manageRolesError');
            errorDiv.textContent = message;
            errorDiv.classList.remove('d-none');
            document.getElementById('manageRolesSuccess').classList.add('d-none');
        }

        function showManageRolesSuccess(message) {
            const successDiv = document.getElementById('manageRolesSuccess');
            successDiv.textContent = message;
            successDiv.classList.remove('d-none');
            document.getElementById('manageRolesError').classList.add('d-none');
        }

        function showEditPermissionModal(permissionId, code, name, description, is_active, is_system) {
            // Reset form and populate with current values
            document.getElementById('editPermissionForm').reset();
            document.getElementById('editPermissionId').value = permissionId;
            document.getElementById('editPermissionCode').value = code;
            document.getElementById('editPermissionName').value = name;
            document.getElementById('editPermissionDescription').value = description || '';
            document.getElementById('editPermissionActive').checked = is_active;
            document.getElementById('editPermissionSystem').checked = is_system;
            document.getElementById('editPermissionError').classList.add('d-none');

            // Clear any previous validation states
            const inputs = document.querySelectorAll('#editPermissionModal input, #editPermissionModal textarea');
            inputs.forEach(input => {
                input.classList.remove('is-invalid');
            });

            const modal = new bootstrap.Modal(document.getElementById('editPermissionModal'));
            modal.show();
        }

        function showCreatePermissionModal() {
            document.getElementById('createPermissionForm').reset();
            document.getElementById('createPermissionError').classList.add('d-none');
            const modal = new bootstrap.Modal(document.getElementById('createPermissionModal'));
            modal.show();
        }

        // Edit Permission Form Submission
        document.getElementById('editPermissionForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const submitBtn = document.getElementById('editPermissionBtn');
            const spinner = document.getElementById('editPermissionSpinner');
            const errorDiv = document.getElementById('editPermissionError');
            const permissionId = document.getElementById('editPermissionId').value;

            // Show loading state
            submitBtn.disabled = true;
            spinner.classList.remove('d-none');
            errorDiv.classList.add('d-none');

            try {
                const formData = new FormData(this);
                const permissionData = {
                    code: formData.get('code'),
                    name: formData.get('name'),
                    description: formData.get('description') || null,
                    is_active: formData.get('is_active') === 'on'
                };

                const response = await fetch(`{{ api_prefix }}/permissions/${permissionId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(permissionData)
                });

                if (response.ok) {
                    // Success - close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editPermissionModal'));
                    modal.hide();
                    showSuccessToast('Permission updated successfully');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    // Handle error
                    const errorData = await response.json();
                    errorDiv.textContent = errorData.detail || 'Failed to update permission';
                    errorDiv.classList.remove('d-none');
                }
            } catch (error) {
                errorDiv.textContent = 'Network error: ' + error.message;
                errorDiv.classList.remove('d-none');
            } finally {
                // Hide loading state
                submitBtn.disabled = false;
                spinner.classList.add('d-none');
            }
        });

        // Create Permission Form Submission
        document.getElementById('createPermissionForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const submitBtn = document.getElementById('createPermissionBtn');
            const spinner = document.getElementById('createPermissionSpinner');
            const errorDiv = document.getElementById('createPermissionError');

            // Show loading state
            submitBtn.disabled = true;
            spinner.classList.remove('d-none');
            errorDiv.classList.add('d-none');

            try {
                const formData = new FormData(this);
                const permissionData = {
                    code: formData.get('code'),
                    name: formData.get('name'),
                    description: formData.get('description') || null,
                    is_active: formData.get('is_active') === 'on',
                    resource: formData.get('resource') || null,
                    action: formData.get('action') || null
                };

                const response = await fetch('{{ api_prefix }}/permissions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(permissionData)
                });

                if (response.ok) {
                    // Success - close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('createPermissionModal'));
                    modal.hide();
                    showSuccessToast('Permission created successfully');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    // Handle error
                    const errorData = await response.json();
                    errorDiv.textContent = errorData.detail || 'Failed to create permission';
                    errorDiv.classList.remove('d-none');
                }
            } catch (error) {
                errorDiv.textContent = 'Network error: ' + error.message;
                errorDiv.classList.remove('d-none');
            } finally {
                // Hide loading state
                submitBtn.disabled = false;
                spinner.classList.add('d-none');
            }
        });

        document.getElementById('confirmDeleteBtn').addEventListener('click', async function () {
            if (!selectedPermissionId) return;

            const submitBtn = this;
            const originalText = submitBtn.textContent;

            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Deleting...';

            try {
                const response = await fetch(`{{ api_prefix }}/permissions/${selectedPermissionId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                if (response.ok) {
                    // Success - close modal and reload page
                    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
                    modal.hide();
                    showSuccessToast('Permission deleted successfully');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    // Handle error
                    const errorData = await response.json();
                    showErrorToast('Error deleting permission: ' + (errorData.detail || 'Unknown error'));
                }
            } catch (error) {
                showErrorToast('Network error: ' + error.message);
            } finally {
                // Restore button state
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        });

        // Handle select all checkbox
        document.getElementById('selectAllCheckbox').addEventListener('change', function () {
            const checkboxes = document.querySelectorAll('.permission-checkbox');
            checkboxes.forEach(cb => cb.checked = this.checked);
        });

        // Event delegation for action buttons
        document.addEventListener('DOMContentLoaded', function () {
            document.addEventListener('click', function (e) {
                const button = e.target.closest('[data-action]');
                if (!button) return;

                e.preventDefault();
                const action = button.dataset.action;

                switch (action) {
                    case 'edit-permission':
                        const permissionId = button.dataset.permissionId;
                        const code = button.dataset.permissionCode;
                        const name = button.dataset.permissionName;
                        const description = button.dataset.permissionDescription;
                        const isActive = button.dataset.permissionActive === 'true';
                        const isSystem = button.dataset.permissionSystem === 'true';
                        showEditPermissionModal(permissionId, code, name, description, isActive, isSystem);
                        break;

                    case 'manage-roles':
                        showManageRolesModal(button.dataset.permissionId, button.dataset.permissionName);
                        break;

                    case 'delete-permission':
                        confirmDelete(button.dataset.permissionId, button.dataset.permissionCode);
                        break;
                }
            });

            // Role management modal event listeners
            const manageRolesModal = document.getElementById('manageRolesModal');
            if (manageRolesModal) {
                // Search input
                const roleSearchInput = document.getElementById('roleSearchInput');
                if (roleSearchInput) {
                    roleSearchInput.addEventListener('input', renderRolesList);
                }

                // Filter select
                const roleFilterSelect = document.getElementById('roleFilterSelect');
                if (roleFilterSelect) {
                    roleFilterSelect.addEventListener('change', renderRolesList);
                }

                // Select all roles button
                const selectAllRolesBtn = document.getElementById('selectAllRolesBtn');
                if (selectAllRolesBtn) {
                    selectAllRolesBtn.addEventListener('click', function() {
                        const visibleCheckboxes = document.querySelectorAll('#rolesListContainer .role-checkbox:not([style*="display: none"])');
                        visibleCheckboxes.forEach(checkbox => {
                            checkbox.checked = true;
                            selectedRoles.add(parseInt(checkbox.value));
                        });
                        updateBulkActions();
                    });
                }

                // Clear selection button
                const clearSelectionBtn = document.getElementById('clearSelectionBtn');
                if (clearSelectionBtn) {
                    clearSelectionBtn.addEventListener('click', function() {
                        const checkboxes = document.querySelectorAll('#rolesListContainer .role-checkbox');
                        checkboxes.forEach(checkbox => {
                            checkbox.checked = false;
                        });
                        selectedRoles.clear();
                        updateBulkActions();
                    });
                }

                // Bulk assign button
                const bulkAssignBtn = document.getElementById('bulkAssignBtn');
                if (bulkAssignBtn) {
                    bulkAssignBtn.addEventListener('click', bulkAssignRoles);
                }

                // Bulk remove button
                const bulkRemoveBtn = document.getElementById('bulkRemoveBtn');
                if (bulkRemoveBtn) {
                    bulkRemoveBtn.addEventListener('click', bulkRemoveRoles);
                }
            }
        });
    </script>
    {% endblock %}