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://git.jdbnet.co.uk/jamie/ipam/releases" target="_blank" rel="noopener noreferrer" class="text-sm font-normal text-gray-300 hover:text-gray-100 -ml-1 mt-3">{{ VERSION }}</a>
    </div>
    <nav class="hidden lg:flex items-center space-x-6 flex-shrink-0" id="main-nav">
        {% if current_user_name %}
        <button type="button" class="text-gray-200 hover:text-gray-400 font-medium flex items-center gap-2 hover:cursor-pointer" id="search-modal-open" aria-label="Open search modal">
            <i class="fas fa-search"></i>
            <span>Search</span>
        </button>
        {% endif %}
        {% 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 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>
    <div class="lg:hidden flex items-center gap-3 flex-shrink-0">
        {% if current_user_name %}
        <button class="flex items-center text-gray-200 hover:cursor-pointer focus:outline-none" id="search-modal-open-mobile" aria-label="Open search modal">
            <i class="fas fa-search text-xl"></i>
        </button>
        {% endif %}
        <button class="flex items-center text-gray-200 hover:cursor-pointer focus:outline-none" 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>
    <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">
        {% 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 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>

    {% if current_user_name %}
    <div id="search-modal" class="hidden fixed inset-0 z-50 items-center justify-center p-4">
        <div id="search-modal-backdrop" class="absolute inset-0 bg-black/60"></div>
        <div class="relative w-full max-w-2xl rounded-lg bg-zinc-800 border border-zinc-700 shadow-xl">
            <div class="flex items-center justify-between px-4 py-3 border-b border-zinc-700">
                <h3 class="text-white font-semibold text-lg">Search</h3>
                <button type="button" id="search-modal-close" class="text-gray-300 hover:text-white hover:cursor-pointer" aria-label="Close search modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form action="/search" method="GET" class="p-4">
                <div class="flex items-center gap-2">
                    <input type="text" name="q" id="search-modal-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-full"
                           value="{{ request.args.get('q', '') }}">
                    <button type="submit" class="text-gray-200 hover:text-gray-400 hover:cursor-pointer flex-shrink-0" aria-label="Submit search">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% endif %}

    <script src="/static/js/header.min.js"></script>
</header>