<!-- Modern Bootstrap 5 Header -->
<header class="notika-header">
    <div class="container">
        <div class="row align-items-center">
            <!-- Logo Section -->
            <div class="col-lg-4 col-md-6 col-8">
                <div class="notika-brand">
                    <a href="index.html">
                        <img src="/logo/notika-logo-horizontal.svg" alt="Notika Admin Template" class="logo-light" />
                        <img src="/logo/notika-logo-dark.svg" alt="Notika Admin Template" class="logo-dark" />
                    </a>
                </div>
            </div>

            <!-- Navigation Section -->
            <div class="col-lg-8 col-md-6 col-4">
                <div class="notika-nav justify-content-end">

                    <!-- Search -->
                    <div class="dropdown">
                        <button class="notika-nav-link" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end notika-dropdown search-dropdown">
                            <div class="search-input-group">
                                <input type="text" placeholder="Search anything..." class="form-control">
                                <i class="fa-solid fa-magnifying-glass search-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Messages -->
                    <div class="dropdown">
                        <button class="notika-nav-link" type="button" data-bs-toggle="dropdown">
                            <i class="fa-solid fa-envelope"></i>
                            <span class="notika-badge">5</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end notika-dropdown">
                            <div class="notika-dropdown-header">
                                Messages
                            </div>
                            <div class="notika-dropdown-body">
                                <a class="notika-dropdown-item" href="view-email.html">
                                    <img src="/post/1.jpg" alt="User">
                                    <div class="notika-dropdown-content">
                                        <h6>David Belle</h6>
                                        <p>Hey! How's the project going? Need any help?</p>
                                    </div>
                                </a>
                                <a class="notika-dropdown-item" href="view-email.html">
                                    <img src="/post/2.jpg" alt="User">
                                    <div class="notika-dropdown-content">
                                        <h6>Sarah Wilson</h6>
                                        <p>The new design looks amazing!</p>
                                    </div>
                                </a>
                                <a class="notika-dropdown-item" href="view-email.html">
                                    <img src="/post/4.jpg" alt="User">
                                    <div class="notika-dropdown-content">
                                        <h6>Mike Johnson</h6>
                                        <p>Thanks for the quick dashboard fix!</p>
                                    </div>
                                </a>
                            </div>
                            <div class="notika-dropdown-footer">
                                <a href="inbox.html">View All Messages</a>
                            </div>
                        </div>
                    </div>

                    <!-- Notifications -->
                    <div class="dropdown">
                        <button class="notika-nav-link" type="button" data-bs-toggle="dropdown">
                            <i class="fa-solid fa-bell"></i>
                            <span class="notika-badge">3</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end notika-dropdown">
                            <div class="notika-dropdown-header">
                                Notifications
                            </div>
                            <div class="notika-dropdown-body">
                                <a class="notika-dropdown-item" href="notification.html">
                                    <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; margin-right: 12px;">
                                        <i class="fa-solid fa-circle-check" style="font-size: 14px;"></i>
                                    </div>
                                    <div class="notika-dropdown-content">
                                        <h6>Task Completed</h6>
                                        <p>Bootstrap 5 migration completed successfully.</p>
                                    </div>
                                </a>
                                <a class="notika-dropdown-item" href="notification.html">
                                    <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; margin-right: 12px;">
                                        <i class="fa-solid fa-bell" style="font-size: 14px;"></i>
                                    </div>
                                    <div class="notika-dropdown-content">
                                        <h6>Server Alert</h6>
                                        <p>Response time higher than usual.</p>
                                    </div>
                                </a>
                                <a class="notika-dropdown-item" href="notification.html">
                                    <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; margin-right: 12px;">
                                        <i class="fa-solid fa-message" style="font-size: 14px;"></i>
                                    </div>
                                    <div class="notika-dropdown-content">
                                        <h6>New Message</h6>
                                        <p>You have 2 unread messages.</p>
                                    </div>
                                </a>
                            </div>
                            <div class="notika-dropdown-footer">
                                <a href="notification.html">View All Notifications</a>
                            </div>
                        </div>
                    </div>

                    <!-- Tasks -->
                    <div class="dropdown">
                        <button class="notika-nav-link" type="button" data-bs-toggle="dropdown">
                            <i class="fa-solid fa-bars"></i>
                            <span class="notika-badge">2</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end notika-dropdown" style="min-width: 280px;">
                            <div class="notika-dropdown-header">
                                Active Tasks
                            </div>
                            <div class="notika-dropdown-body">
                                <div class="task-item px-3">
                                    <div class="task-title">Website Redesign</div>
                                    <div class="task-progress">
                                        <div class="progress">
                                            <div class="progress-bar" style="width: 85%"></div>
                                        </div>
                                        <small class="text-muted">85% Complete</small>
                                    </div>
                                </div>
                                <div class="task-item px-3">
                                    <div class="task-title">API Integration</div>
                                    <div class="task-progress">
                                        <div class="progress">
                                            <div class="progress-bar" style="width: 65%"></div>
                                        </div>
                                        <small class="text-muted">65% Complete</small>
                                    </div>
                                </div>
                                <div class="task-item px-3">
                                    <div class="task-title">Database Optimization</div>
                                    <div class="task-progress">
                                        <div class="progress">
                                            <div class="progress-bar" style="width: 95%"></div>
                                        </div>
                                        <small class="text-muted">95% Complete</small>
                                    </div>
                                </div>
                            </div>
                            <div class="notika-dropdown-footer">
                                <a href="widgets.html">View All Tasks</a>
                            </div>
                        </div>
                    </div>

                    <!-- Chat -->
                    <div class="dropdown">
                        <button class="notika-nav-link" type="button" data-bs-toggle="dropdown">
                            <i class="fa-solid fa-message"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end notika-dropdown">
                            <div class="notika-dropdown-header">
                                Team Chat
                            </div>
                            <div class="notika-dropdown-body">
                                <a class="notika-dropdown-item" href="compose-email.html">
                                    <div style="position: relative;">
                                        <img src="/post/1.jpg" alt="User">
                                        <div class="chat-status"></div>
                                    </div>
                                    <div class="notika-dropdown-content">
                                        <h6>John Doe</h6>
                                        <p>Online - Available</p>
                                    </div>
                                </a>
                                <a class="notika-dropdown-item" href="compose-email.html">
                                    <div style="position: relative;">
                                        <img src="/post/2.jpg" alt="User">
                                    </div>
                                    <div class="notika-dropdown-content">
                                        <h6>Sarah Smith</h6>
                                        <p>Last seen 2 hours ago</p>
                                    </div>
                                </a>
                                <a class="notika-dropdown-item" href="compose-email.html">
                                    <div style="position: relative;">
                                        <img src="/post/4.jpg" alt="User">
                                    </div>
                                    <div class="notika-dropdown-content">
                                        <h6>Mike Johnson</h6>
                                        <p>Away - Back in 10 min</p>
                                    </div>
                                </a>
                            </div>
                            <div class="notika-dropdown-footer">
                                <a href="compose-email.html">Open Chat</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</header>
<!-- End Modern Header -->