ipam/templates/header.html

<header class="bg-zinc-800 shadow-md py-3 px-6 flex items-center justify-between relative">
    <div class="flex items-center space-x-3 flex-shrink-0">
        <a href="/" class="flex items-center space-x-3">
            <img src="{{ LOGO_PNG }}" alt="Logo" class="h-8 rounded">
            <span class="text-2xl font-bold text-white whitespace-nowrap">{{ NAME }} IPAM</span>
        </a>
        <a href="https://github.com/JDB-NET/ipam/releases" target="_blank" rel="noopener noreferrer" class="text-sm font-normal text-gray-300 hover:text-gray-100 -ml-1 mt-3">v{{ VERSION }}</a>
    </div>
    <div class="hidden lg:flex items-center justify-center absolute left-1/2" style="transform: translateX(calc(-50% + 1.5rem));">
        <form action="/search" method="GET" class="flex items-center space-x-2">
            <input type="text" name="q" id="search-input" placeholder="Search..." 
                   class="bg-zinc-700 text-white placeholder-gray-400 px-4 py-2 rounded-md text-base focus:outline-none focus:ring-2 focus:ring-gray-500 w-100"
                   value="{{ request.args.get('q', '') }}">
            <button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0">
                <i class="fas fa-search"></i>
            </button>
        </form>
    </div>
    <nav class="hidden lg:flex items-center space-x-6 flex-shrink-0" id="main-nav">
        {% if has_permission('view_index') %}
        <a href="/" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        {% endif %}
        {% if has_permission('view_devices') %}
        <a href="/devices" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-server"></i>
            <span>Devices</span>
        </a>
        {% endif %}
        {% if has_permission('view_racks') %}
        <a href="/racks" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-th"></i>
            <span>Racks</span>
        </a>
        {% endif %}
        {% if has_permission('view_admin') %}
        <a href="/admin" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-cog"></i>
            <span>Admin</span>
        </a>
        {% endif %}
        {% if has_permission('view_help') %}
        <a href="/help" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-question-circle"></i>
            <span>Help</span>
        </a>
        {% endif %}
        {% if current_user_name %}
        <a href="/account" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-user-cog"></i>
            <span>Account</span>
        </a>
        <a href="/logout" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-sign-out-alt"></i>
            <span>Logout</span>
        </a>
        {% endif %}
    </nav>
    <button class="lg:hidden flex items-center text-gray-200 hover:cursor-pointer focus:outline-none flex-shrink-0" id="nav-toggle" aria-label="Open navigation menu">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
    </button>
    <div class="lg:hidden fixed top-13 left-0 right-0 bg-zinc-800 shadow-lg z-50 w-full hidden flex-col py-2" id="mobile-nav">
        <form action="/search" method="GET" class="px-4 py-2 border-b border-zinc-700">
            <div class="flex items-center space-x-2">
                <input type="text" name="q" placeholder="Search..." 
                       class="bg-zinc-700 text-white placeholder-gray-400 px-3 py-2.5 rounded text-base focus:outline-none focus:ring-2 focus:ring-gray-500 flex-1"
                       value="{{ request.args.get('q', '') }}">
                <button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </form>
        {% if has_permission('view_index') %}
        <a href="/" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        {% endif %}
        {% if has_permission('view_devices') %}
        <a href="/devices" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-server"></i>
            <span>Devices</span>
        </a>
        {% endif %}
        {% if has_permission('view_racks') %}
        <a href="/racks" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-th"></i>
            <span>Racks</span>
        </a>
        {% endif %}
        {% if has_permission('view_admin') %}
        <a href="/admin" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-cog"></i>
            <span>Admin</span>
        </a>
        {% endif %}
        {% if has_permission('view_help') %}
        <a href="/help" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-question-circle"></i>
            <span>Help</span>
        </a>
        {% endif %}
        {% if current_user_name %}
        <a href="/account" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-user-cog"></i>
            <span>Account</span>
        </a>
        <a href="/logout" class="block px-6 py-2 text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2">
            <i class="fas fa-sign-out-alt"></i>
            <span>Logout</span>
        </a>
        {% endif %}
    </div>
    <script src="/static/js/header.js"></script>
    
    <!-- Update Available Toast -->
    <div id="update-toast" class="hidden fixed bottom-4 right-4 bg-gray-200 dark:bg-zinc-800 border border-gray-400 dark:border-zinc-600 rounded-lg shadow-lg max-w-md z-50">
        <div class="p-4">
            <div class="flex items-start justify-between mb-2">
                <div class="flex items-center gap-2">
                    <i class="fas fa-bell text-gray-900 dark:text-gray-100"></i>
                    <h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">Update Available</h3>
                </div>
                <button id="toast-close" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:cursor-pointer">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
                Version <span id="toast-latest-version" class="font-semibold"></span> is now available. You're currently on <span id="toast-current-version" class="font-semibold"></span>.
            </p>
            <div class="flex gap-2 mt-3">
                <a id="toast-compare-link" href="#" target="_blank" rel="noopener noreferrer" class="flex-1 bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600 text-gray-900 dark:text-gray-100 px-3 py-2 rounded text-center text-sm hover:cursor-pointer">
                    View Changes
                </a>
            </div>
        </div>
    </div>
    
    <style>
        #update-toast {
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
    
    <script src="/static/js/update_toast.js"></script>
</header>