{% extends "base.html" %}

{% load static %}

{% block title %}Edit Settings - {{ site.domain }}{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'mediaapp/css/browser.css' %}">
<script src="{% static 'mediaapp/js/media-browse.js' %}" defer></script>
{% if site_edit_inherit_page_template %}
<h1 class="settings-page-title">Edit Settings for {{ site.domain }}</h1>
<div class="page-content">
{% endif %}
<div class="domain-settings-edit">
    <div class="settings-layout">
        <nav class="settings-sidebar">
            <div class="settings-sidebar-inner">
                <a href="#main-settings" class="btn-nav">Main Settings</a>
                <a href="#domain-users" class="btn-nav">Domain Users</a>
                {% for fieldset in custom_fieldsets %}
                <a href="#{{ fieldset.id }}" class="btn-nav">{{ fieldset.nav_label|default:fieldset.legend }}</a>
                {% endfor %}
                {% for item in settings_extra_nav_items %}
                <a href="{{ item.href }}" class="btn-nav">{{ item.label }}</a>
                {% endfor %}
                <a href="#footer-settings" class="btn-nav">Footer</a>
                <a href="#cookie-consent-settings" class="btn-nav">Cookie Banner</a>
            </div>
        </nav>

        <div class="settings-main">
        {% if not site_edit_inherit_page_template %}
        <h1 class="settings-page-title">Edit Settings for {{ site.domain }}</h1>
        {% endif %}
        <form method="post" id="domain-settings-form" class="js-form-save-bar" data-site-id="{{ site.id }}" data-save-bar-unsaved="You have unsaved settings changes." data-save-bar-actions=".form-actions" data-confirm-shared-page-links="{{ shared_page_link_fields|default:'' }}" data-confirm-shared-page-links-message="{{ shared_page_link_message|default:'These page links are used in multiple places on the site. Continue?' }}">
        {% csrf_token %}

        <fieldset id="main-settings">
            <legend>Main Settings</legend>
            {% include "domains/includes/custom_settings_fields.html" with fields=custom_main_settings_fields %}

            <div class="form-row form-row--spaced">
                <div class="form-group">
                    <label for="language">Language</label>
                    <input type="text" id="language" name="language" value="{{ domain_settings.language }}" required>
                    <small>e.g., en, de, fr</small>
                </div>
                <div class="form-group">
                    <label for="country">Country</label>
                    <select id="country" name="country">
                        <option value="">---</option>
                        {% for code, label in country_choices %}
                        <option value="{{ code }}"{% if domain_settings.country == code %} selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <small>{{ country_field_help|default:"ISO country code for this domain." }}</small>
                </div>
            </div>

            <div class="form-row form-row--spaced">
                <div class="form-group">
                    <label for="date_format">
                        Date format
                        <button type="button" class="help-icon" data-slideout-target="date-format-help-panel" aria-label="Date format help">
                            <i class="fa-solid fa-circle-question" aria-hidden="true"></i>
                        </button>
                    </label>
                    <input
                        type="text"
                        id="date_format"
                        name="date_format"
                        value="{{ domain_settings.date_format }}"
                        list="date-format-options"
                        placeholder="MMMM dd, yyyy"
                    >
                    <datalist id="date-format-options">
                        {% for option in date_format_options %}
                        <option value="{{ option.pattern }}">{{ option.label }} - {{ option.example }}</option>
                        {% endfor %}
                    </datalist>
                    <small>Click on ? icon for help. Days of week and month names will be translated automatically (including case handling).</small>
                </div>
                {% include "domains/includes/custom_settings_fields.html" with fields=custom_main_row_fields %}
            </div>
            
            {% if front_page_choice_groups %}
            <div class="form-group">
                <label for="front_page">Front page</label>
                <div class="content-autocomplete-wrapper">
                    <input type="text" id="front_page_display" value="{{ front_page_display }}" class="content-autocomplete-input" autocomplete="off" placeholder="Search by title or slug..." data-content-autocomplete data-content-types="{{ front_page_content_types }}" data-content-target="front_page" data-content-value="value">
                    <input type="hidden" id="front_page" name="front_page" value="{{ front_page_value }}" required>
                    <div class="content-autocomplete-dropdown"></div>
                </div>
                <small>Required: show a display page or event at <code>/</code>.</small>
            </div>
            {% else %}
            {% if front_page_event_choices is not None %}
            <div class="form-group">
                <label for="front_page_event_id">Front page event</label>
                <select id="front_page_event_id" name="front_page_event_id">
                    <option value="">None</option>
                    {% for choice in front_page_event_choices %}
                    <option value="{{ choice.id }}"{% if custom_settings.front_page_event_id == choice.id %} selected{% endif %}>{{ choice.title }}</option>
                    {% endfor %}
                </select>
                <small>Optional: show this public event at <code>/</code> instead of the default home. Choosing an event clears the display page below.</small>
            </div>
            {% endif %}
            {% if front_page_display_page_choices %}
            <div class="form-group">
                <label for="front_page_display_page_id">Front page display page</label>
                <select id="front_page_display_page_id" name="front_page_display_page_id">
                    <option value="">None</option>
                    {% for choice in front_page_display_page_choices %}
                    <option value="{{ choice.id }}"{% if custom_settings.front_page_display_page_id == choice.id %} selected{% endif %}>{{ choice.title }}</option>
                    {% endfor %}
                </select>
                <small>Used when the front page type is set to specially designed. Choosing a display page clears the event above.</small>
            </div>
            {% endif %}
            {% endif %}
            
            {% include "domains/includes/custom_settings_fields.html" with fields=custom_page_settings_fields %}
        </fieldset>

        <fieldset id="domain-users">
            <legend>Domain Users</legend>
            <input type="hidden" name="domain_users_submitted" value="1">
            <div class="users-section">
                <h3>Existing Users</h3>
                <div id="users-list">
                    {% for domain_user in domain_users %}
                        <div class="user-row" data-user-id="{{ domain_user.id }}">
                            <input type="hidden" class="permission-remove-user" name="domain_user_{{ domain_user.id }}_remove" value="0">
                            <span class="user-info">
                                <strong>{{ domain_user.user.username }}</strong>
                            </span>
                            {% for key, label, checked in domain_user.role_list %}
                            <label>
                                <input type="checkbox" name="domain_user_{{ domain_user.id }}_role_{{ key }}" class="permission-role" data-role="{{ key }}" {% if checked %}checked{% endif %}>
                                {{ label }}
                            </label>
                            {% endfor %}
                            <button type="button" class="btn-remove-user" data-user-id="{{ domain_user.id }}">Remove</button>
                        </div>
                    {% empty %}
                        <p>No users assigned to this domain yet.</p>
                    {% endfor %}
                </div>
                {% if extra_editor_rows %}
                <div class="extra-editors-list">
                    <small>
                        Also editing specific content on this domain:
                        {% for row in extra_editor_rows %}{{ row.user.username }} ({{ row.label }}){% if not forloop.last %}, {% endif %}{% endfor %}
                    </small>
                </div>
                {% endif %}
            </div>

            <div class="add-user-section">
                <h3>Add New User</h3>
                <div class="form-group add-user-inline">
                    <label for="username">Username:</label>
                    <input type="text" id="username" name="username">
                    {% for key, label in role_choices %}
                    <label class="inline-checkbox">
                        <input type="checkbox" class="new-user-role" data-role="{{ key }}">
                        {{ label }}
                    </label>
                    {% endfor %}
                    <button type="button" id="add-user-btn" class="btn btn-primary">Add User</button>
                </div>
            </div>
        </fieldset>

        {% for fieldset in custom_fieldsets %}
        <fieldset id="{{ fieldset.id }}">
            <legend>{{ fieldset.legend }}</legend>
            {% include "domains/includes/custom_settings_fields.html" with fields=fieldset.fields %}
            {% if fieldset.template %}{% include fieldset.template %}{% endif %}
        </fieldset>
        {% endfor %}

        {% if settings_extra_fieldsets_template %}
        {% include settings_extra_fieldsets_template %}
        {% endif %}

        <fieldset id="footer-settings">
            <legend>Footer Links</legend>
            <p class="footer-links-help">These links appear in the site footer. The cookie consent banner links (e.g. Privacy Policy, Impressum) are also shown in the footer, so you don't need to add them here.</p>
            <table class="footer-settings-table">
                <thead>
                    <tr>
                        <th>Link</th>
                        <th>Text</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in footer_rows %}
                        <tr class="footer-link-row" data-footer-index="{{ row.index }}">
                            <td class="footer-page-cell">
                                <div class="content-autocomplete-wrapper">
                                    <input type="text" id="footer_link_{{ row.index }}" name="footer_link_{{ row.index }}" value="{{ row.page_display|default:row.external_url }}" class="content-autocomplete-input" autocomplete="off" placeholder="Search by title or enter https://..." data-content-autocomplete data-content-types="{{ link_content_types }}" data-content-target="footer_url_{{ row.index }}" data-content-value="value">
                                    <input type="hidden" id="footer_url_{{ row.index }}" name="footer_url_{{ row.index }}" value="{{ row.url }}">
                                    <div class="content-autocomplete-dropdown"></div>
                                </div>
                            </td>
                            <td>
                                <input type="text" id="footer_text_{{ row.index }}" name="footer_text_{{ row.index }}" value="{{ row.text }}" placeholder="Text">
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <button type="button" class="btn btn-secondary" id="add-footer-link-row">Add another footer link</button>
        </fieldset>

        <fieldset id="cookie-consent-settings">
            <legend>Cookie Banner Settings</legend>
            <div class="form-group cookie-banner-type-group">
                <label>Cookie Banner Type:</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="cookie_banner_type" value="banner" {% if cookie_settings.banner_type == 'banner' %}checked{% endif %}>
                        Show small cookie consent banner with accept, reject and learn more buttons
                    </label>
                    <label>
                        <input type="radio" name="cookie_banner_type" value="modal" {% if cookie_settings.banner_type == 'modal' or not cookie_settings.banner_type %}checked{% endif %}>
                        Show cookie consent modal with full range of options
                    </label>
                    <label>
                        <input type="radio" name="cookie_banner_type" value="none" {% if cookie_settings.banner_type == 'none' %}checked{% endif %}>
                        Don't show cookie banner (disable cookie consent)
                    </label>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="cookie_banner_link_1_url">Banner Link 1 (Privacy Policy):</label>
                    <div class="content-autocomplete-wrapper">
                        <input type="text" id="cookie_banner_link_1_url" name="cookie_banner_link_1_url" value="{{ cookie_settings.banner_link_1_url }}" class="content-autocomplete-input" autocomplete="off" placeholder="Search by title or enter a URL" data-content-autocomplete data-content-types="{{ link_content_types }}" data-content-value="url">
                        <div class="content-autocomplete-dropdown"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cookie_banner_link_1_title">Banner Link 1 Title:</label>
                    <input type="text" id="cookie_banner_link_1_title" name="cookie_banner_link_1_title" value="{{ cookie_settings.banner_link_1_title }}">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="cookie_banner_link_2_url">Banner Link 2 (Optional, usually Impressum):</label>
                    <div class="content-autocomplete-wrapper">
                        <input type="text" id="cookie_banner_link_2_url" name="cookie_banner_link_2_url" value="{{ cookie_settings.banner_link_2_url }}" class="content-autocomplete-input" autocomplete="off" placeholder="Search by title or enter a URL" data-content-autocomplete data-content-types="{{ link_content_types }}" data-content-value="url">
                        <div class="content-autocomplete-dropdown"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cookie_banner_link_2_title">Banner Link 2 Title:</label>
                    <input type="text" id="cookie_banner_link_2_title" name="cookie_banner_link_2_title" value="{{ cookie_settings.banner_link_2_title }}">
                </div>
            </div>
            <div class="form-group cookie-services-section">
                <label>Enabled Services:</label>
                <div class="cookie-services-table-wrap">
                    <table class="cookie-services-table">
                        <thead>
                            <tr><th>Enabled</th><th>Service</th><th>Description</th></tr>
                        </thead>
                        <tbody data-cookie-services-body>
                            {% for service in cookie_settings.available_services %}
                            <tr{% if service.editable %} class="cookie-services-table__embed"{% endif %}>
                                <td>
                                    {% if service.required %}
                                    <input type="checkbox" name="cookie_service_{{ service.name }}" checked disabled aria-label="Enable {{ service.title }}">
                                    <input type="hidden" name="cookie_service_{{ service.name }}" value="on">
                                    <small class="required-service-label">Required</small>
                                    {% else %}
                                    <input type="checkbox" name="cookie_service_{{ service.name }}" {% if service.enabled %}checked{% endif %} aria-label="Enable {{ service.title }}">
                                    {% endif %}
                                </td>
                                <td>
                                    {% if service.editable %}
                                    <input type="hidden" name="cookie_custom_service_id" value="{{ service.id }}">
                                    <input type="hidden" name="cookie_custom_service_name" value="{{ service.name }}">
                                    <input type="text" name="cookie_custom_service_title" value="{{ service.title }}" aria-label="Service title for {{ service.name }}">
                                    <small>{{ service.name }}</small>
                                    {% else %}
                                    <strong>{{ service.title }}</strong>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if service.editable %}
                                    <textarea name="cookie_custom_service_description" rows="3" aria-label="Description for {{ service.title }}">{{ service.description }}</textarea>
                                    {% else %}
                                    {{ service.description|safe }}
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="cookie-services-actions">
                    <button type="button" class="btn btn-outline-edit" data-add-cookie-service>Add new</button>
                    {% if can_scan_embed_services %}
                    <button type="submit" name="scan_embed_services" value="1" class="btn btn-outline-edit">Scan site for services</button>
                    {% endif %}
                </div>
            </div>
        </fieldset>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save Settings</button>
            <a href="{% url 'domains:landing' %}" class="btn btn-secondary">Cancel</a>
        </div>
        </form>
        </div>
    </div>
</div>
{% if site_edit_inherit_page_template %}
</div>
{% endif %}

<div class="slideout-panel" id="date-format-help-panel" data-slideout-panel>
    <div class="slideout-panel-content">
        <div class="slideout-panel-header">
            <h2>Date format help</h2>
            <button class="slideout-panel-close" data-slideout-close>×</button>
        </div>
        <div class="slideout-panel-body">
            <p>Use ICU pattern syntax. Examples below use the site language. Days of week and month names are translated automatically (including case handling).</p>
            {% for section in date_format_help_sections %}
                <h3>{{ section.title }}</h3>
                <table class="date-format-help-table">
                    <thead>
                        <tr>
                            <th>Token</th>
                            <th>Description</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in section.items %}
                        <tr>
                            <td><code>{{ item.token }}</code></td>
                            <td>{{ item.description }}</td>
                            <td>{{ item.example }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endfor %}
        </div>
    </div>
    <div class="slideout-panel-overlay" data-slideout-overlay></div>
</div>

{% include "domains/includes/settings_extra_panels.html" %}

{{ role_choices|json_script:"domain-role-choices" }}
<script>
(function() {
    const ROLE_CHOICES = JSON.parse(document.getElementById('domain-role-choices').textContent);
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    const domainSettingsForm = document.getElementById('domain-settings-form');

    if (domainSettingsForm) {
        domainSettingsForm.addEventListener('submit', function(e) {
            if (domainSettingsForm.dataset.sharedLinksConfirmed === '1') return;
            const names = (domainSettingsForm.getAttribute('data-confirm-shared-page-links') || '')
                .split(',')
                .map(function(name) { return name.trim(); })
                .filter(Boolean);
            const changed = names.some(function(name) {
                const input = document.getElementById(name);
                if (!input) return false;
                return input.value !== (input.getAttribute('data-original-value') || '');
            });
            if (!changed) return;
            e.preventDefault();
            const message = domainSettingsForm.getAttribute('data-confirm-shared-page-links-message')
                || 'These page links are used in multiple places on the site. Continue?';
            if (!window.confirm(message)) return;
            domainSettingsForm.dataset.sharedLinksConfirmed = '1';
            if (typeof domainSettingsForm.requestSubmit === 'function') {
                domainSettingsForm.requestSubmit();
            } else {
                domainSettingsForm.submit();
            }
        });
    }
    
    function getHeaders() {
        return {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        };
    }
    
    function initFooterPageAutocompletes(root) {
        const scope = root || document;
        const inputs = scope.matches && scope.matches('[data-content-autocomplete]')
            ? [scope]
            : scope.querySelectorAll('[data-content-autocomplete]');
        inputs.forEach(initContentAutocomplete);
    }

    initFooterPageAutocompletes(document);

    const addFooterButton = document.getElementById('add-footer-link-row');
    if (addFooterButton) {
        addFooterButton.addEventListener('click', function() {
            const tbody = document.querySelector('.footer-settings-table tbody');
            const lastRow = tbody ? tbody.querySelector('.footer-link-row:last-child') : null;
            const nextIndex = lastRow ? parseInt(lastRow.getAttribute('data-footer-index'), 10) + 1 : 1;
            const row = document.createElement('tr');
            row.className = 'footer-link-row';
            row.setAttribute('data-footer-index', nextIndex);
            row.innerHTML = `
                <td class="footer-page-cell">
                    <div class="content-autocomplete-wrapper">
                        <input type="text" id="footer_link_${nextIndex}" name="footer_link_${nextIndex}" value="" class="content-autocomplete-input" autocomplete="off" placeholder="Search by title or enter https://..." data-content-autocomplete data-content-types="{{ link_content_types }}" data-content-target="footer_url_${nextIndex}" data-content-value="value">
                        <input type="hidden" id="footer_url_${nextIndex}" name="footer_url_${nextIndex}" value="">
                        <div class="content-autocomplete-dropdown"></div>
                    </div>
                </td>
                <td>
                    <input type="text" id="footer_text_${nextIndex}" name="footer_text_${nextIndex}" value="" placeholder="Text">
                </td>
            `;
            tbody.appendChild(row);
            initFooterPageAutocompletes(row);
        });
    }

    function initContentAutocomplete(input) {
        if (input.dataset.contentAutocompleteReady === '1') return;
        input.dataset.contentAutocompleteReady = '1';
        const wrapper = input.closest('.content-autocomplete-wrapper');
        const dropdown = wrapper ? wrapper.querySelector('.content-autocomplete-dropdown') : null;
        const targetId = input.getAttribute('data-content-target');
        const targetInput = targetId ? document.getElementById(targetId) : input;
        const valueKey = input.getAttribute('data-content-value') || 'url';
        const types = input.getAttribute('data-content-types') || '';
        let searchTimeout = null;
        let selectedIndex = -1;
        if (!dropdown || !targetInput) return;

        function hideDropdown() {
            dropdown.style.display = 'none';
            selectedIndex = -1;
        }

        function updateSelected() {
            const items = dropdown.querySelectorAll('.content-autocomplete-item:not(.content-autocomplete-no-results)');
            items.forEach((item, index) => {
                item.classList.toggle('content-autocomplete-selected', index === selectedIndex);
            });
        }

        input.addEventListener('input', function(e) {
            const query = e.target.value.trim();
            if (targetInput !== input) targetInput.value = valueKey === 'slug' ? query : '';
            clearTimeout(searchTimeout);
            if (query.length < 2) {
                dropdown.innerHTML = '';
                hideDropdown();
                return;
            }
            searchTimeout = setTimeout(() => {
                fetch(`/domains/content-autocomplete/?q=${encodeURIComponent(query)}&types=${encodeURIComponent(types)}`)
                    .then(response => response.json())
                    .then(data => {
                        dropdown.innerHTML = '';
                        if (!data.results || !data.results.length) {
                            dropdown.innerHTML = '<div class="content-autocomplete-item content-autocomplete-no-results">No matches found</div>';
                            dropdown.style.display = 'block';
                            return;
                        }
                        data.results.forEach((item, index) => {
                            const option = document.createElement('div');
                            option.className = 'content-autocomplete-item';
                            const title = document.createElement('strong');
                            title.textContent = item.title;
                            const detail = document.createElement('small');
                            detail.textContent = `${item.kind_label} - ${item.url}`;
                            option.append(title, document.createElement('br'), detail);
                            option.addEventListener('click', function() {
                                input.value = (valueKey === 'value' || valueKey === 'slug') ? item.text : item.url;
                                targetInput.value = item[valueKey] || '';
                                hideDropdown();
                            });
                            option.addEventListener('mouseenter', function() {
                                selectedIndex = index;
                                updateSelected();
                            });
                            dropdown.appendChild(option);
                        });
                        dropdown.style.display = 'block';
                        selectedIndex = -1;
                    })
                    .catch(() => hideDropdown());
            }, 300);
        });

        input.addEventListener('keydown', function(e) {
            const items = dropdown.querySelectorAll('.content-autocomplete-item:not(.content-autocomplete-no-results)');
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
                updateSelected();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                selectedIndex = Math.max(selectedIndex - 1, -1);
                updateSelected();
            } else if (e.key === 'Enter' && selectedIndex >= 0 && items[selectedIndex]) {
                e.preventDefault();
                items[selectedIndex].click();
            } else if (e.key === 'Escape') {
                hideDropdown();
            }
        });

        document.addEventListener('click', function(e) {
            if (!wrapper.contains(e.target)) hideDropdown();
        });
    }

    document.querySelectorAll('[data-content-autocomplete]').forEach(initContentAutocomplete);

    document.addEventListener('click', function(e) {
        const button = e.target.closest('[data-domain-media-action="choose"]');
        if (!button || !window.openMediaBrowse) return;
        e.preventDefault();
        const target = button.getAttribute('data-target');
        const input = document.getElementById(target);
        const preview = document.querySelector(`[data-domain-media-preview="${target}"]`);
        window.openMediaBrowse({
            tab: 'browse',
            lockType: true,
            preselect: { type: 'image' },
            insertLabel: 'Use image',
            onSelect: function(data) {
                if (input) input.value = data.id || '';
                if (preview) {
                    preview.replaceChildren();
                    if (data.url) {
                        const img = document.createElement('img');
                        img.src = data.url;
                        img.alt = '';
                        preview.append(img);
                    }
                }
            }
        });
    });

    document.addEventListener('click', function(e) {
        const button = e.target.closest('[data-domain-media-action="delete"]');
        if (!button) return;
        e.preventDefault();
        const target = button.getAttribute('data-target');
        const input = document.getElementById(target);
        const preview = document.querySelector(`[data-domain-media-preview="${target}"]`);
        if (input) input.value = '';
        if (preview) preview.innerHTML = '';
    });
    
    // Add user button
    document.getElementById('add-user-btn').addEventListener('click', function(e) {
        e.preventDefault();
        const username = document.getElementById('username').value;
        if (!username) {
            alert('Please enter a username');
            return;
        }
        const roles = Array.from(document.querySelectorAll('.new-user-role:checked')).map(function(box) { return box.dataset.role; });

        fetch('/domains/users/', {
            method: 'POST',
            headers: getHeaders(),
            body: JSON.stringify({
                action: 'add',
                username: username,
                roles: roles
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                const usersList = document.getElementById('users-list');
                if (usersList.querySelector('p')) {
                    usersList.innerHTML = '';
                }
                const userRow = document.createElement('div');
                userRow.className = 'user-row';
                userRow.setAttribute('data-user-id', data.user.id);
                const info = document.createElement('span');
                info.className = 'user-info';
                const name = document.createElement('strong');
                name.textContent = data.user.username;
                info.appendChild(name);
                userRow.appendChild(info);
                ROLE_CHOICES.forEach(function(role) {
                    const label = document.createElement('label');
                    const box = document.createElement('input');
                    box.type = 'checkbox';
                    box.className = 'permission-role';
                    box.dataset.role = role[0];
                    box.name = `domain_user_${data.user.id}_role_${role[0]}`;
                    box.checked = data.user.roles.indexOf(role[0]) !== -1;
                    label.appendChild(box);
                    label.appendChild(document.createTextNode(' ' + role[1]));
                    userRow.appendChild(label);
                });
                userRow.insertAdjacentHTML('beforeend', `
                    <input type="hidden" class="permission-remove-user" name="domain_user_${data.user.id}_remove" value="0">
                    <button type="button" class="btn-remove-user" data-user-id="${data.user.id}">Remove</button>
                `);
                usersList.appendChild(userRow);
                
                document.getElementById('username').value = '';
                document.querySelectorAll('.new-user-role').forEach(function(box) { box.checked = false; });
                
                attachUserRowListeners(userRow);
            } else {
                alert('Error: ' + (data.message || 'Failed to add user'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error adding user');
        });
    });
    
    function attachUserRowListeners(userRow) {
        userRow.querySelectorAll('.permission-role').forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                if (domainSettingsForm && domainSettingsForm._formSaveBarMarkDirty) {
                    domainSettingsForm._formSaveBarMarkDirty();
                }
            });
        });

        userRow.querySelector('.btn-remove-user').addEventListener('click', function() {
            const pendingRemoval = !userRow.classList.contains('is-pending-removal');
            userRow.classList.toggle('is-pending-removal', pendingRemoval);
            userRow.querySelector('.permission-remove-user').value = pendingRemoval ? '1' : '0';
            userRow.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
                checkbox.disabled = pendingRemoval;
            });
            this.textContent = pendingRemoval ? 'Undo' : 'Remove';
            if (domainSettingsForm && domainSettingsForm._formSaveBarMarkDirty) {
                domainSettingsForm._formSaveBarMarkDirty();
            }
        });
    }
    
    // Attach listeners to existing user rows
    document.querySelectorAll('.user-row').forEach(attachUserRowListeners);

    const addCookieServiceButton = document.querySelector('[data-add-cookie-service]');
    const cookieServicesBody = document.querySelector('[data-cookie-services-body]');
    if (addCookieServiceButton && cookieServicesBody) {
        addCookieServiceButton.addEventListener('click', function() {
            const row = document.createElement('tr');
            row.className = 'cookie-services-table__embed';
            row.innerHTML = `
                <td><small>Enabled when saved</small></td>
                <td>
                    <input type="hidden" name="cookie_custom_service_id" value="">
                    <input type="hidden" name="cookie_custom_service_name" value="">
                    <input type="text" name="cookie_custom_service_title" aria-label="New service title" placeholder="Service title" required>
                </td>
                <td><textarea name="cookie_custom_service_description" rows="3" aria-label="New service description"></textarea></td>
            `;
            cookieServicesBody.appendChild(row);
            row.querySelectorAll('input, textarea').forEach(function(field) {
                field.addEventListener('input', function() {
                    const form = field.closest('form');
                    if (form && form._formSaveBarMarkDirty) form._formSaveBarMarkDirty();
                });
                field.addEventListener('change', function() {
                    const form = field.closest('form');
                    if (form && form._formSaveBarMarkDirty) form._formSaveBarMarkDirty();
                });
            });
            row.querySelector('input[name="cookie_custom_service_title"]').focus();
        });
    }

    // Sidebar scroll-spy: highlight the nav link for the section in view
    const navLinks = Array.from(document.querySelectorAll('.settings-sidebar .btn-nav'));
    const navSections = navLinks
        .map(link => document.getElementById(link.getAttribute('href').slice(1)))
        .filter(Boolean);

    if (navLinks.length && navSections.length && 'IntersectionObserver' in window) {
        const headerHeightRaw = getComputedStyle(document.documentElement).getPropertyValue('--site-header-height');
        const headerOffset = (parseFloat(headerHeightRaw) || 76) + 20;
        let activeId = null;
        const setActive = function(id) {
            if (id === activeId) return;
            activeId = id;
            navLinks.forEach(link => {
                link.classList.toggle('active', link.getAttribute('href') === `#${id}`);
            });
        };

        const visibleRatios = new Map();
        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                visibleRatios.set(entry.target.id, entry.isIntersecting ? entry.intersectionRatio : 0);
            });
            let bestId = null;
            let bestRatio = 0;
            visibleRatios.forEach(function(ratio, id) {
                if (ratio > bestRatio) {
                    bestRatio = ratio;
                    bestId = id;
                }
            });
            if (bestId) setActive(bestId);
        }, { rootMargin: `-${headerOffset}px 0px -60% 0px`, threshold: [0, 0.1, 0.25, 0.5, 0.75, 1] });

        navSections.forEach(section => observer.observe(section));
        setActive(navSections[0].id);
    }
})();
</script>

{% if settings_extra_scripts_template %}
{% include settings_extra_scripts_template %}
{% endif %}

{% include "mediaapp/includes/media_browser_modals.html" %}

{% endblock %}