<!DOCTYPE html>
<html lang="en">
    <head>
        {% include 'base/header.html' %}
        {% block head %}
        {% endblock %}
    </head>
    <body>
        <div x-data="{ showSidebar: false }" class="relative flex w-full flex-col md:flex-row">
            <!-- This allows screen readers to skip the sidebar and go directly to the main content. -->
            <a class="sr-only" href="#main-content">skip to the main content</a>
            
            <!-- dark overlay for when the sidebar is open on smaller screens  -->
            <div x-cloak x-show="showSidebar" class="fixed inset-0 z-10 bg-neutral-950/10 backdrop-blur-sm md:hidden" aria-hidden="true" x-on:click="showSidebar = false" x-transition.opacity=""></div>

            <nav x-cloak class="fixed left-0 z-20 flex h-svh w-60 shrink-0 flex-col border-r border-neutral-300 bg-neutral-50 p-4 transition-transform duration-300 md:w-64 md:translate-x-0 md:relative dark:border-neutral-700 dark:bg-neutral-900" x-bind:class="showSidebar ? 'translate-x-0' : '-translate-x-60'" aria-label="sidebar navigation">
                <!-- logo  -->
                <a href="#" class="ml-2 w-fit text-2xl font-bold text-neutral-900 dark:text-white">
                    <span class="sr-only">homepage</span>
                    <span class="text-yellow-500">P</span>ower<span class="text-yellow-500">V</span>iew.py
                    <span class="text-[0.6rem] align-super font-medium bg-white dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 px-1 rounded">Beta</span>
                    <span class="text-[0.6rem] align-super font-medium text-neutral-500 dark:text-neutral-400 ml-1">v{{ version }}</span>
                </a>

                <!-- search  -->
                <div class="relative my-4 flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="absolute left-2 top-1/2 size-5 -translate-y-1/2 text-neutral-600/50 dark:text-neutral-300/50" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                    </svg>
                    <input type="search" class="w-full border border-neutral-300 rounded-md bg-white px-2 py-1.5 pl-9 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-950/50 dark:focus-visible:outline-white" name="search" aria-label="Search" placeholder="Search"/>
                </div>

                <!-- sidebar links  -->
                <div class="flex flex-col gap-2 overflow-y-auto pb-6 scrollbar">
                    {% for item in nav_items %}
                        {% if item.name == "Modules" %}
                            <div class="w-full flex items-center gap-2 px-2 py-1.5 rounded text-gray-400 cursor-default">
                                <i class="fas fa-cubes w-5 h-5"></i>
                                <span class="underline">{{ item.name }}</span>
                            </div>
                            <ul class="pl-4 space-y-2">
                                {% for subitem in item.subitems %}
                                    <li>
                                        <a href="{{ subitem.link }}" class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md font-medium text-neutral-600 underline-offset-2 hover:bg-black/5 hover:text-neutral-900 focus-visible:underline focus:outline-none dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-white">
                                            <i class="{{ subitem.icon }} w-5 h-5"></i>
                                            <span>{{ subitem.name }}</span>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% elif item.link %}
                            <a href="{{ item.link }}" class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md font-medium text-neutral-600 underline-offset-2 hover:bg-black/5 hover:text-neutral-900 focus-visible:underline focus:outline-none dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-white">
                                <i class="{{ item.icon }} w-5 h-5"></i>
                                <span>{{ item.name }}</span>
                            </a>
                        {% else %}
                            <button id="{{ item.button_id }}" class="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md font-medium text-neutral-600 underline-offset-2 hover:bg-black/5 hover:text-neutral-900 focus-visible:underline focus:outline-none dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-white">
                                <i class="{{ item.icon }} w-5 h-5"></i>
                                <span>{{ item.name }}</span>
                            </button>
                        {% endif %}
                    {% endfor %}
                </div>
                <!-- Profile Menu  -->
                <div x-data="{ menuIsOpen: false }" class="mt-auto" x-on:keydown.esc.window="menuIsOpen = false" id="profile-menu">
                    <button type="button" class="flex w-full cursor-pointer items-center rounded-md gap-2 p-2 text-left text-neutral-600 hover:bg-black/5 hover:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:outline-white" x-bind:class="menuIsOpen ? 'bg-black/10 dark:bg-white/10' : ''" aria-haspopup="true" x-on:click="menuIsOpen = ! menuIsOpen" x-bind:aria-expanded="menuIsOpen">
                        <div class="flex flex-col">
                            <span class="text-sm font-bold text-neutral-900 dark:text-white" id="username-display"></span>
                            <span class="w-32 overflow-hidden text-ellipsis text-xs md:w-36" id="connection-domain-display"></span>
                            <span class="w-32 overflow-hidden text-ellipsis text-xs md:w-36" id="connection-address-display"></span>
                            <span class="w-32 overflow-hidden text-ellipsis text-xs md:w-36" id="nameserver-address-display"></span>
                            <div class="flex items-center">
                                <span class="w-32 overflow-hidden text-ellipsis text-xs md:w-36" aria-hidden="true" id="connection-status-display"></span>
                            </div>
                            <span class="sr-only">profile settings</span>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="ml-auto size-4 shrink-0 -rotate-90 md:rotate-0" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
                        </svg>
                    </button>  
                    
                    <!-- menu -->
                    <div x-cloak x-show="menuIsOpen" class="absolute bottom-20 right-6 z-20 -mr-1 w-48 border divide-y divide-neutral-300 border-neutral-300 bg-white dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-950 rounded-md md:-right-44 md:bottom-4" role="menu" x-on:click.outside="menuIsOpen = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition="" x-trap="menuIsOpen">
                        <div class="flex flex-col py-1.5">
                            <button id="disconnect-button" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium text-neutral-600 underline-offset-2 hover:bg-black/5 hover:text-neutral-900 focus-visible:underline focus:outline-none dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-white" role="menuitem">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd"/>
                                    <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd"/>
                                </svg>
                                <span>Disconnect</span>
                            </button>
                            <button id="clear-cache-button" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium text-neutral-600 underline-offset-2 hover:bg-black/5 hover:text-neutral-900 focus-visible:underline focus:outline-none dark:text-neutral-300 dark:hover:bg-white/5 dark:hover:text-white" role="menuitem">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd"/>
                                </svg>
                                <span>Clear Cache</span>
                            </button>
                        </div>

                    </div>
                </div>
            </nav>
            <!-- main content - removed p-4  -->
            <div class="h-svh w-full overflow-y-auto bg-white dark:bg-neutral-950" id="content-area">
                <!-- {% include 'base/searchbar.html' %} -->
                {% block content %}
                {% endblock %}
                {% include 'views/commandhistory.html' %}
                {% include 'views/settings.html' %}
                {% include 'views/detailspanel.html' %}
                {% include 'views/tableview.html' %}
            </div>

            <!-- toggle button for small screen  -->
            <button class="fixed right-4 top-4 z-20 rounded-full bg-black p-4 md:hidden text-neutral-100 dark:bg-white dark:text-black" x-on:click="showSidebar = ! showSidebar">
                <svg x-show="showSidebar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5" aria-hidden="true">
                    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
                </svg>
                <svg x-show="! showSidebar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-5" aria-hidden="true">
                    <path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"/>
                </svg>
                <span class="sr-only">sidebar toggle</span>
            </button>
        </div>
        {% include 'views/modal.html' %}
        {% include 'views/alert.html' %}

        {% block scripts %}
        {% endblock %}
    </body>
</html>