﻿@* Streamlit-Style Compact Top Navigation *@
<nav class="ships-navbar">
    <!-- Brand / Title -->
    <div class="navbar-brand">
        <i class="fas fa-boxes"></i>
        <span>SHIPS Warehouse Management</span>
    </div>

    <!-- Navbar Actions -->
    <div class="navbar-actions">
        <!-- Search -->
        <div style="flex: 1; max-width: 300px; margin-right: 16px;">
            <input type="text" class="form-control" placeholder="Search items..." style="font-size: 13px; padding: 6px 12px;">
        </div>

        <!-- Notifications Icon -->
        <button class="navbar-icon-btn" id="notificationBtn" title="Notifications">
            <i class="fas fa-bell"></i>
            <span class="navbar-badge">3</span>
        </button>

        <!-- Messages Icon -->
        <button class="navbar-icon-btn" title="Messages">
            <i class="fas fa-envelope"></i>
            <span class="navbar-badge" style="display: none;">1</span>
        </button>

        <!-- User Menu -->
        <div class="btn-group" role="group">
            <button type="button" class="navbar-icon-btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="User Menu">
                <img src="https://ui-avatars.com/api/?name=Admin+User&background=0052cc&color=fff&size=32" 
                     alt="User" style="width: 28px; height: 28px; border-radius: 4px;">
            </button>
            <ul class="dropdown-menu dropdown-menu-end" style="margin-top: 8px;">
                <li><a class="dropdown-item" href="#"><i class="fas fa-user"></i> Profile</a></li>
                <li><a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hidden Notification Popover (for JS integration) -->
<div id="notificationPopover" style="display: none; position: absolute; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.07); width: 320px; max-height: 400px; overflow-y: auto; z-index: 1050;">
    <div style="padding: 12px 16px; border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 13px;">
        Notifications
    </div>
    <div style="padding: 12px;">
        <div style="padding: 8px; border-left: 3px solid #10b981; background-color: #D1FAE5; border-radius: 4px; margin-bottom: 8px; font-size: 13px;">
            <strong>Stock Added:</strong> 50 units of Component A received
        </div>
        <div style="padding: 8px; border-left: 3px solid #f59e0b; background-color: #FEF3C7; border-radius: 4px; margin-bottom: 8px; font-size: 13px;">
            <strong>Low Stock:</strong> Component B below threshold
        </div>
        <div style="padding: 8px; border-left: 3px solid #ef4444; background-color: #FEE2E2; border-radius: 4px; font-size: 13px;">
            <strong>Action Required:</strong> Approve Material Request #2024-001
        </div>
    </div>
</div>
