{% extends "base/layouts.html" %}
{% block content %}
<div class="flex h-screen bg-neutral-100 dark:bg-neutral-900">
    <!-- Tree View (keeping original ID and structure) -->
    <div class="w-1/3 flex flex-col border-r border-neutral-200 dark:border-neutral-700" id="tree-view-panel">
        <!-- Search 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-sitemap text-neutral-500 dark:text-neutral-400"></i>
                    <h2 class="text-sm font-semibold text-neutral-900 dark:text-white">Explorer</h2>
                </div>
                <input type="text" 
                       id="object-tree-search" 
                       name="object-tree-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 objects...">
            </div>
        </div>

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

    <!-- Results Panel (keeping original ID) -->
    <div class="flex-1 flex flex-col" id="results-panel">
        <!-- Tab Navigation (keeping original structure) -->
        <div class="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
            <div class="flex justify-between items-center px-4">
                <div class="flex gap-1" role="tablist">
                    <button onclick="selectTab('general')" 
                            aria-selected="true" 
                            tabindex="0" 
                            class="px-4 py-3 text-sm text-neutral-600 font-medium dark:text-neutral-300 hover:text-neutral-900 hover:border-b-2 hover:border-neutral-300 dark:hover:border-neutral-600 dark:hover:text-white"
                            role="tab" 
                            aria-controls="tabpanelGeneral">General</button>
                    <button onclick="selectTab('dacl')" 
                            aria-selected="false" 
                            tabindex="-1" 
                            class="px-4 py-3 text-sm text-neutral-600 font-medium dark:text-neutral-300 hover:text-neutral-900 hover:border-b-2 hover:border-neutral-300 dark:hover:border-neutral-600 dark:hover:text-white"
                            role="tab" 
                            aria-controls="tabpanelDacl">DACL</button>
                    <button onclick="selectTab('members')" 
                            aria-selected="false" 
                            tabindex="-1" 
                            style="display: none;"
                            class="px-4 py-3 text-sm text-neutral-600 font-medium dark:text-neutral-300 hover:text-neutral-900 hover:border-b-2 hover:border-neutral-300 dark:hover:border-neutral-600 dark:hover:text-white"
                            role="tab" 
                            aria-controls="tabpanelMembers">Members</button>
                    <button onclick="selectTab('trusts')" 
                            aria-selected="false" 
                            tabindex="-1" 
                            style="display: none;"
                            class="px-4 py-3 text-sm text-neutral-600 font-medium dark:text-neutral-300 hover:text-neutral-900 hover:border-b-2 hover:border-neutral-300 dark:hover:border-neutral-600 dark:hover:text-white"
                            role="tab" 
                            aria-controls="tabpanelTrusts">Trusts</button>
                </div>

                <!-- Filter Input (keeping original ID) -->
                <div class="relative">
                    <input type="text" 
                           id="tab-search" 
                           class="w-64 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="Filter results..." />
                    <button class="clear-input absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors">
                        <i class="fa-solid fa-xmark fa-xs"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Tab Panels (keeping original IDs and structure) -->
        <div class="flex-1 overflow-y-auto bg-white dark:bg-neutral-800 relative scrollbar">
            {% include 'views/spinner.html' %}
            
            <div id="tabpanelGeneral" role="tabpanel" class="h-full">
                <div id="general-content">
                    <!-- General content will be dynamically populated -->
                </div>
            </div>

            <div id="tabpanelDacl" role="tabpanel" class="h-full" style="display: none;">
                <div id="dacl-content" class="p-4">
                    <div class="mb-4 flex justify-end">
                        <button type="button" 
                            onclick="openExplorerAddObjectAclModal()"
                            class="inline-flex items-center gap-1.5 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-neutral-800 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-600">
                            <i class="fas fa-plus fa-sm"></i>
                            Add ACL
                        </button>
                    </div>
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="h-8 text-left text-neutral-600 dark:text-neutral-400">
                                <th class="py-2">Type</th>
                                <th class="py-2">Principal</th>
                                <th class="py-2">Access</th>
                                <th class="py-2">Inherited From</th>
                                <th class="py-2">Applies to</th>
                            </tr>
                        </thead>
                        <tbody id="dacl-rows" class="divide-y divide-neutral-200 dark:divide-neutral-700">
                            <!-- DACL rows will be dynamically populated -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="tabpanelMembers" role="tabpanel" class="h-full" style="display: none;">
                <div id="members-content" class="p-4">
                    <!-- Members content will be dynamically populated -->
                </div>
            </div>

            <div id="tabpanelTrusts" role="tabpanel" class="h-full" style="display: none;">
                <div id="trusts-content" class="p-4">
                    <!-- Trusts content will be dynamically populated -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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