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

{% block content %}
<div class="flex h-screen bg-neutral-100 dark:bg-neutral-900">
    <!-- Initial Loading Spinner -->
    <div id="box-overlay-spinner-init" class="fixed inset-0 bg-white/50 dark:bg-neutral-900/50 hidden">
        <div class="flex items-center justify-center h-full">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 dark:border-yellow-500"></div>
        </div>
    </div>

    <!-- Regular Loading Spinner -->
    <div id="box-overlay-spinner" class="fixed inset-0 bg-white/50 dark:bg-neutral-900/50 hidden">
        <div class="flex items-center justify-center h-full">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 dark:border-yellow-500"></div>
        </div>
    </div>

    <!-- Left Panel - Tree View -->
    <div class="w-1/3 flex flex-col border-r border-neutral-200 dark:border-neutral-700">
        <!-- Header -->
        <div class="p-4 border-b border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-shield-halved text-neutral-500 dark:text-neutral-400"></i>
                    <h2 class="text-sm font-semibold text-neutral-900 dark:text-white">Group Policy Objects</h2>
                </div>
                <input type="text" 
                       id="gpo-search" 
                       class="w-48 rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm text-neutral-900 dark:text-white dark:border-neutral-700 dark:bg-neutral-800 placeholder:text-neutral-500 dark:placeholder:text-neutral-400" 
                       placeholder="Search GPOs...">
            </div>
        </div>

        <!-- Tree View Content -->
        <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700 scrollbar">
            <div id="gpo-tree-view" class="p-4">
                <!-- Tree view content will be dynamically populated -->
            </div>
        </div>
    </div>

    <!-- Right Panel - Details -->
    <div class="flex-1 flex flex-col relative" id="gpo-details-panel">
        {% include 'views/spinner.html' %}
        <div class="flex-1 overflow-y-auto bg-white dark:bg-neutral-800 relative scrollbar">
            <!-- Tabs -->
            <div id="gpo-tabs" class="flex justify-between items-center gap-2 overflow-x-auto border-b border-neutral-300 dark:border-neutral-700" role="tablist" aria-label="tab options" style="display: none;">
                <div class="flex gap-2">
                    <button onclick="selectGPOTab('info')" aria-selected="true" tabindex="0" 
                        class="h-min px-4 py-2 text-sm font-bold text-black border-b-2 border-black dark:border-yellow-500 dark:text-yellow-500" 
                        type="button" role="tab" aria-controls="tabpanelInfo">Info</button>
                    <button onclick="selectGPOTab('settings')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelSettings">Settings</button>
                    <button onclick="selectGPOTab('delegation')" aria-selected="false" tabindex="-1" 
                        class="h-min px-4 py-2 text-sm text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900" 
                        type="button" role="tab" aria-controls="tabpanelDelegation">Delegation</button>
                </div>
            </div>

            <!-- Tab Content -->
            <div id="gpo-content" class="h-full">
                <!-- Initial content -->
                <div class="flex items-center justify-center h-full text-neutral-500">
                    <div class="text-center -mt-16">
                        <i class="fa-solid fa-shield-halved mb-2 text-2xl"></i>
                        <p>Select a Group Policy Object to view details</p>
                    </div>
                </div>

                <!-- Info Tab -->
                <div id="tabpanelInfo" role="tabpanel" aria-label="info" style="display: none;">
                    <!-- Info content will be populated here -->
                </div>

                <!-- Settings Tab -->
                <div id="tabpanelSettings" role="tabpanel" aria-label="settings" style="display: none;">
                    <!-- Settings content will be populated here -->
                </div>

                <!-- Delegation Tab -->
                <div id="tabpanelDelegation" role="tabpanel" aria-label="delegation" style="display: none;">
                    <!-- Delegation content will be populated here -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/gpo.js') }}"></script>
{% endblock %}