{% extends "base.html" %}
{% import "components.html" as components %}

{% block title %}{{ crate::i18n::t("groups-title", lang) }} - Remotto Console{% endblock %}

{% block content %}
<div class="flex h-screen">
    <!-- Sidebar -->
    {% call components::sidebar("groups", lang) %}

    <!-- Main Content -->
    <main class="flex-1 overflow-auto md:ml-0 bg-slate-900">
        {% call components::header(crate::i18n::t("groups-title", lang), username, lang) %}

        <div class="p-4 md:p-8">
            <!-- Action Bar -->
            <div class="flex justify-end mb-6">
                <button onclick="document.getElementById('create-modal').classList.remove('hidden')"
                    class="px-4 py-2 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                    {{ crate::i18n::t("groups-new", lang) }}
                </button>
            </div>
            <!-- Groups Grid -->
            <div id="groups-list" hx-get="/admin/api/groups" hx-trigger="load"
                hx-on::after-request="if (event.detail.requestConfig.verb === 'delete') { if (event.detail.successful) showNotification(i18n.deleted, 'success'); else showNotification(i18n.deleteFailed, 'error'); }"
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
                <div class="text-center text-slate-400 col-span-full py-8">{{ crate::i18n::t("common-loading", lang) }}
                </div>
            </div>
        </div>
    </main>
</div>

<!-- Create Group Modal -->
<div id="create-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="glass rounded-2xl p-8 border border-white/10 w-full max-w-md mx-4 max-h-[85vh] overflow-y-auto">
        <h3 class="text-xl font-semibold mb-6">{{ crate::i18n::t("common-create", lang) }} {{
            crate::i18n::t("nav-groups", lang) }}</h3>
        <form hx-post="/admin/api/groups" hx-target="#groups-list"
            hx-on::after-request="if(event.detail.successful) { document.getElementById('create-modal').classList.add('hidden'); this.reset(); showNotification(i18n.groupCreated, 'success'); } else { showNotification(i18n.createFailed, 'error'); }">
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("groups-name", lang)
                        }}</label>
                    <input type="text" name="name" required
                        class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white"
                        placeholder="e.g., Group 1-A">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("groups-description",
                        lang) }}</label>
                    <textarea name="description" rows="3"
                        class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white resize-none"
                        placeholder='{{ crate::i18n::t("groups-placeholder-desc", lang) }}'></textarea>
                </div>
            </div>
            <div class="flex gap-4 mt-6">
                <button type="button" onclick="document.getElementById('create-modal').classList.add('hidden')"
                    class="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
                    {{ crate::i18n::t("common-cancel", lang) }}
                </button>
                <button type="submit"
                    class="flex-1 py-3 px-4 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                    {{ crate::i18n::t("common-create", lang) }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Group Modal -->
<div id="edit-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
    <div class="glass rounded-2xl p-8 border border-white/10 w-full max-w-lg mx-4 max-h-[85vh] overflow-y-auto">
        <h3 class="text-xl font-semibold mb-6">{{ crate::i18n::t("common-edit", lang) }} {{ crate::i18n::t("nav-groups",
            lang) }}</h3>
        <form id="edit-form" onsubmit="saveGroupSettings(event)">
            <input type="hidden" id="edit-group-id">
            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("groups-name", lang)
                        }}</label>
                    <input type="text" id="edit-name" required
                        class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">{{ crate::i18n::t("groups-description",
                        lang) }}</label>
                    <textarea id="edit-description" rows="3"
                        class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-white resize-none"></textarea>
                </div>

                <!-- Settings Tabs -->
                <div class="flex border-b border-slate-700 mb-4">
                    <button type="button" onclick="switchTab('student')" id="tab-student"
                        class="px-4 py-2 text-sm font-medium text-primary-400 border-b-2 border-primary-500 focus:outline-none transition-colors">
                        {{ crate::i18n::t("groups-client-settings", lang) }}
                    </button>
                    <button type="button" onclick="switchTab('operator')" id="tab-operator"
                        class="px-4 py-2 text-sm font-medium text-slate-400 border-b-2 border-transparent hover:text-slate-200 focus:outline-none transition-colors">
                        {{ crate::i18n::t("groups-operator-settings", lang) }}
                    </button>
                </div>

                <!-- Student Settings -->
                <div id="settings-student">
                    <!-- Settings Grid with Visual Cards -->
                    <div class="space-y-4">
                        <!-- Resolution Card -->
                        <div class="bg-slate-800/40 rounded-xl p-4 border border-slate-700/50">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-8 h-8 bg-primary-500/20 rounded-lg flex items-center justify-center">
                                    <svg class="w-4 h-4 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                    </svg>
                                </div>
                                <label class="text-sm font-medium text-slate-200">{{ crate::i18n::t("groups-resolution", lang) }}</label>
                            </div>
                            <div class="relative" id="resolution-dropdown">
                                <input type="hidden" id="edit-resolution" value="native">
                                <button type="button" onclick="toggleResolutionDropdown()"
                                    class="flex items-center justify-between gap-2 w-full px-4 py-3 bg-slate-700/50 border border-slate-600/50 rounded-lg text-white text-sm hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-primary-500 outline-none">
                                    <span id="resolution-label" class="font-medium">{{ crate::i18n::t("groups-native", lang) }}</span>
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <div id="resolution-menu"
                                    class="hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-20 max-h-60 overflow-y-auto">
                                    <button type="button" onclick="selectResolution('native', i18n.nativeLabel)"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">{{ crate::i18n::t("groups-native", lang) }}</button>
                                    <button type="button" onclick="selectResolution('1920x1080', '1920x1080')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">1920 x 1080 (Full HD)</button>
                                    <button type="button" onclick="selectResolution('1280x720', '1280x720')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">1280 x 720 (HD)</button>
                                    <button type="button" onclick="selectResolution('854x480', '854x480')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">854 x 480 (SD)</button>
                                    <button type="button" onclick="selectResolution('640x360', '640x360')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">640 x 360</button>
                                </div>
                            </div>
                        </div>

                        <!-- FPS & Bitrate Row -->
                        <div class="grid grid-cols-2 gap-4">
                            <!-- FPS Card -->
                            <div class="bg-slate-800/40 rounded-xl p-4 border border-slate-700/50">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
                                        <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                        </svg>
                                    </div>
                                    <label class="text-sm font-medium text-slate-200">{{ crate::i18n::t("groups-fps", lang) }}</label>
                                </div>
                                <div class="text-center mb-3">
                                    <span id="fps-display" class="text-3xl font-bold text-primary-400">15</span>
                                    <span class="text-sm text-slate-400 ml-1">FPS</span>
                                </div>
                                <input type="range" id="edit-fps" min="1" max="30" value="15"
                                    oninput="document.getElementById('fps-display').textContent = this.value"
                                    class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500">
                                <div class="flex justify-between text-xs text-slate-500 mt-2">
                                    <span>1</span><span>15</span><span>30</span>
                                </div>
                            </div>

                            <!-- Bitrate Card -->
                            <div class="bg-slate-800/40 rounded-xl p-4 border border-slate-700/50">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-8 h-8 bg-emerald-500/20 rounded-lg flex items-center justify-center">
                                        <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                                        </svg>
                                    </div>
                                    <label class="text-sm font-medium text-slate-200">{{ crate::i18n::t("groups-bitrate", lang) }}</label>
                                </div>
                                <div class="text-center mb-3">
                                    <span id="bitrate-display" class="text-3xl font-bold text-primary-400">1000</span>
                                    <span class="text-sm text-slate-400 ml-1">kbps</span>
                                </div>
                                <input type="range" id="edit-bitrate" min="500" max="5000" step="100" value="1000"
                                    oninput="document.getElementById('bitrate-display').textContent = this.value"
                                    class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500">
                                <div class="flex justify-between text-xs text-slate-500 mt-2">
                                    <span>500k</span><span>2M</span><span>5M</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Operator Settings -->
                <div id="settings-operator" class="hidden">
                    <!-- Settings Grid with Visual Cards -->
                    <div class="space-y-4">
                        <!-- Resolution Card -->
                        <div class="bg-slate-800/40 rounded-xl p-4 border border-slate-700/50">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-8 h-8 bg-primary-500/20 rounded-lg flex items-center justify-center">
                                    <svg class="w-4 h-4 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                    </svg>
                                </div>
                                <label class="text-sm font-medium text-slate-200">{{ crate::i18n::t("groups-resolution", lang) }}</label>
                            </div>
                            <div class="relative" id="operator-resolution-dropdown">
                                <input type="hidden" id="edit-operator-resolution" value="native">
                                <button type="button" onclick="toggleOperatorResolutionDropdown()"
                                    class="flex items-center justify-between gap-2 w-full px-4 py-3 bg-slate-700/50 border border-slate-600/50 rounded-lg text-white text-sm hover:bg-slate-700 transition-colors focus:ring-2 focus:ring-primary-500 outline-none">
                                    <span id="operator-resolution-label" class="font-medium">{{ crate::i18n::t("groups-native", lang) }}</span>
                                    <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <div id="operator-resolution-menu"
                                    class="hidden absolute top-full mt-2 left-0 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl overflow-hidden z-20 max-h-60 overflow-y-auto">
                                    <button type="button" onclick="selectOperatorResolution('native', i18n.nativeLabel)"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">{{ crate::i18n::t("groups-native", lang) }}</button>
                                    <button type="button" onclick="selectOperatorResolution('1920x1080', '1920x1080')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">1920 x 1080 (Full HD)</button>
                                    <button type="button" onclick="selectOperatorResolution('1280x720', '1280x720')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">1280 x 720 (HD)</button>
                                    <button type="button" onclick="selectOperatorResolution('854x480', '854x480')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">854 x 480 (SD)</button>
                                    <button type="button" onclick="selectOperatorResolution('640x360', '640x360')"
                                        class="w-full text-left px-4 py-3 hover:bg-primary-500/20 text-sm text-slate-200 transition-colors">640 x 360</button>
                                </div>
                            </div>
                        </div>

                        <!-- FPS & Bitrate Row -->
                        <div class="grid grid-cols-2 gap-4">
                            <!-- FPS Card -->
                            <div class="bg-slate-800/40 rounded-xl p-4 border border-slate-700/50">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-8 h-8 bg-cyan-500/20 rounded-lg flex items-center justify-center">
                                        <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                        </svg>
                                    </div>
                                    <label class="text-sm font-medium text-slate-200">{{ crate::i18n::t("groups-fps", lang) }}</label>
                                </div>
                                <div class="text-center mb-3">
                                    <span id="operator-fps-display" class="text-3xl font-bold text-primary-400">15</span>
                                    <span class="text-sm text-slate-400 ml-1">FPS</span>
                                </div>
                                <input type="range" id="edit-operator-fps" min="1" max="30" value="15"
                                    oninput="document.getElementById('operator-fps-display').textContent = this.value"
                                    class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500">
                                <div class="flex justify-between text-xs text-slate-500 mt-2">
                                    <span>1</span><span>15</span><span>30</span>
                                </div>
                            </div>

                            <!-- Bitrate Card -->
                            <div class="bg-slate-800/40 rounded-xl p-4 border border-slate-700/50">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-8 h-8 bg-emerald-500/20 rounded-lg flex items-center justify-center">
                                        <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                                        </svg>
                                    </div>
                                    <label class="text-sm font-medium text-slate-200">{{ crate::i18n::t("groups-bitrate", lang) }}</label>
                                </div>
                                <div class="text-center mb-3">
                                    <span id="operator-bitrate-display" class="text-3xl font-bold text-primary-400">1000</span>
                                    <span class="text-sm text-slate-400 ml-1">kbps</span>
                                </div>
                                <input type="range" id="edit-operator-bitrate" min="500" max="5000" step="100" value="1000"
                                    oninput="document.getElementById('operator-bitrate-display').textContent = this.value"
                                    class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500">
                                <div class="flex justify-between text-xs text-slate-500 mt-2">
                                    <span>500k</span><span>2M</span><span>5M</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex gap-4 mt-6">
                <button type="button" onclick="document.getElementById('edit-modal').classList.add('hidden')"
                    class="flex-1 py-3 px-4 bg-slate-700 hover:bg-slate-600 rounded-lg transition-colors">
                    {{ crate::i18n::t("common-cancel", lang) }}
                </button>
                <button type="submit"
                    class="flex-1 py-3 px-4 bg-gradient-to-r from-primary-600 to-cyan-600 hover:from-primary-500 hover:to-cyan-500 rounded-lg font-semibold transition-all">
                    {{ crate::i18n::t("common-save", lang) }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    const i18n = {
        saveFailed: '{{ crate::i18n::t("error-operation-failed", lang) }}',
        error: '{{ crate::i18n::t("error-generic", lang) }}',
        deleted: '{{ crate::i18n::t("groups-deleted", lang) }}',
        deleteFailed: '{{ crate::i18n::t("groups-delete-failed", lang) }}',
        settingsSaved: '{{ crate::i18n::t("groups-settings-saved", lang) }}',
        groupCreated: '{{ crate::i18n::t("users-created", lang) }}',
        createFailed: '{{ crate::i18n::t("groups-create-failed", lang) }}',
        nativeLabel: '{{ crate::i18n::t("groups-native", lang) }}',
        webRestrictionSaved: 'Web制限を保存しました'
    };

    const resolutionLabels = {
        'native': i18n.nativeLabel,
        '1920x1080': '1920 x 1080 (Full HD)',
        '1280x720': '1280 x 720 (HD)',
        '854x480': '854 x 480 (SD)',
        '640x360': '640 x 360'
    };

    function openEditGroupModal(groupId, name, description, resolution, fps, bitrate, operatorResolution, operatorFps, operatorBitrate) {
        document.getElementById('edit-group-id').value = groupId;
        document.getElementById('edit-name').value = name;
        document.getElementById('edit-description').value = description;

        // 学生配信設定
        document.getElementById('edit-resolution').value = resolution;
        document.getElementById('resolution-label').textContent = resolutionLabels[resolution] || resolution;

        document.getElementById('edit-fps').value = fps;
        document.getElementById('fps-display').textContent = fps;

        document.getElementById('edit-bitrate').value = bitrate || 1000;
        document.getElementById('bitrate-display').textContent = bitrate || 1000;

        // 教師配信設定
        const opRes = operatorResolution || 'native';
        document.getElementById('edit-operator-resolution').value = opRes;
        document.getElementById('operator-resolution-label').textContent = resolutionLabels[opRes] || opRes;

        document.getElementById('edit-operator-fps').value = operatorFps || 15;
        document.getElementById('operator-fps-display').textContent = operatorFps || 15;

        document.getElementById('edit-operator-bitrate').value = operatorBitrate || 1000;
        document.getElementById('operator-bitrate-display').textContent = operatorBitrate || 1000;


        // タブ切り替え（初期は学生）
        switchTab('student');

        document.getElementById('edit-modal').classList.remove('hidden');
    }


    // 学生配信解像度ドロップダウン
    function toggleResolutionDropdown() {
        document.getElementById('resolution-menu').classList.toggle('hidden');
    }

    function selectResolution(value, label) {
        document.getElementById('edit-resolution').value = value;
        document.getElementById('resolution-label').textContent = label;
        document.getElementById('resolution-menu').classList.add('hidden');
    }

    // オペレータ解像度ドロップダウン
    function toggleOperatorResolutionDropdown() {
        document.getElementById('operator-resolution-menu').classList.toggle('hidden');
    }

    function selectOperatorResolution(value, label) {
        document.getElementById('edit-operator-resolution').value = value;
        document.getElementById('operator-resolution-label').textContent = label;
        document.getElementById('operator-resolution-menu').classList.add('hidden');
    }

    // 外側クリックでドロップダウンを閉じる
    document.addEventListener('click', function (e) {
        const resDropdown = document.getElementById('resolution-dropdown');
        const resMenu = document.getElementById('resolution-menu');
        if (resDropdown && resMenu && !resDropdown.contains(e.target)) {
            resMenu.classList.add('hidden');
        }

        const opResDropdown = document.getElementById('operator-resolution-dropdown');
        const opResMenu = document.getElementById('operator-resolution-menu');
        if (opResDropdown && opResMenu && !opResDropdown.contains(e.target)) {
            opResMenu.classList.add('hidden');
        }
    });

    async function saveGroupSettings(event) {
        event.preventDefault();

        const groupId = document.getElementById('edit-group-id').value;
        const data = {
            name: document.getElementById('edit-name').value,
            description: document.getElementById('edit-description').value,
            resolution: document.getElementById('edit-resolution').value,
            fps: parseInt(document.getElementById('edit-fps').value),
            bitrate_kbps: parseInt(document.getElementById('edit-bitrate').value),
            operator_resolution: document.getElementById('edit-operator-resolution').value,
            operator_fps: parseInt(document.getElementById('edit-operator-fps').value),
            operator_bitrate_kbps: parseInt(document.getElementById('edit-operator-bitrate').value)
        };

        try {
            const response = await fetch(`/admin/api/groups/${groupId}`, {
                method: 'PUT',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                document.getElementById('edit-modal').classList.add('hidden');
                showNotification(i18n.settingsSaved, "success");
                if (window.htmx) {
                    htmx.ajax('GET', '/admin/api/groups', { target: '#groups-list', swap: 'innerHTML' });
                } else {
                    location.reload();
                }
            } else {
                showNotification(i18n.saveFailed, 'error');
            }
        } catch (err) {
            showNotification(i18n.error + err.message, 'error');
        }
    }
    function switchTab(tab) {
        const studentTab = document.getElementById('tab-student');
        const operatorTab = document.getElementById('tab-operator');
        const studentSettings = document.getElementById('settings-student');
        const operatorSettings = document.getElementById('settings-operator');

        if (tab === 'student') {
            studentTab.classList.remove('border-transparent', 'text-slate-400', 'hover:text-slate-200');
            studentTab.classList.add('border-primary-500', 'text-primary-400');

            operatorTab.classList.remove('border-primary-500', 'text-primary-400');
            operatorTab.classList.add('border-transparent', 'text-slate-400', 'hover:text-slate-200');

            studentSettings.classList.remove('hidden');
            operatorSettings.classList.add('hidden');
        } else {
            operatorTab.classList.remove('border-transparent', 'text-slate-400', 'hover:text-slate-200');
            operatorTab.classList.add('border-primary-500', 'text-primary-400');

            studentTab.classList.remove('border-primary-500', 'text-primary-400');
            studentTab.classList.add('border-transparent', 'text-slate-400', 'hover:text-slate-200');

            operatorSettings.classList.remove('hidden');
            studentSettings.classList.add('hidden');
        }
    }
</script>
{% endblock %}