{{-- ==========================================================
    HI-TECH PATHSHALA
    FRONTEND HEADER
    Production Ready | Responsive | Accessible
========================================================== --}}

<header
    class="ht-header"
    id="siteHeader">

    {{-- ==================================================
        HEADER BAR
    =================================================== --}}
    <div class="ht-header__bar">

        <div class="container">

            <div class="ht-header__inner">

                {{-- ==================================================
                    BRAND
                =================================================== --}}
                <div class="ht-header__brand">

                    {{-- Mobile Menu Toggle --}}
                    <button
                        type="button"
                        id="mobileMenuToggle"
                        class="ht-header__menu-btn"
                        aria-label="Open navigation menu"
                        aria-controls="mobileMenu"
                        aria-expanded="false">

                        <i
                            class="bi bi-list"
                            aria-hidden="true">
                        </i>

                    </button>


                    {{-- Logo --}}
                    <a
                        href="{{ url('/') }}"
                        class="ht-header__logo"
                        aria-label="Hi-Tech Pathshala Home">

                        <img
                            src="{{ asset('assets/images/logo.jpg') }}"
                            alt="Hi-Tech Pathshala"
                            width="180"
                            height="48"
                            decoding="async">

                    </a>

                </div>


                {{-- ==================================================
                    PRIMARY NAVIGATION
                =================================================== --}}
                <nav
                    class="ht-header__navigation"
                    aria-label="Primary navigation">

                    {{-- Explore --}}
                    <button
                        type="button"
                        id="exploreToggle"
                        class="ht-header__nav-link ht-header__nav-link--dropdown"
                        aria-expanded="false"
                        aria-haspopup="true"
                        aria-controls="exploreMegaMenu">

                        <span>
                            Explore
                        </span>

                        <i
                            class="bi bi-chevron-down"
                            aria-hidden="true">
                        </i>

                    </button>

                </nav>


                {{-- ==================================================
                    SEARCH
                =================================================== --}}
                <div class="ht-header__search">

                    <x-header.search />

                </div>


                {{-- ==================================================
                    HEADER ACTIONS
                =================================================== --}}
                <div class="ht-header__actions">

                    {{-- Contact --}}
                    <a
                        href="{{ route('contact') }}"
                        class="ht-header__action-link">

                        Contact

                    </a>


                    {{-- Cart --}}
                    <a
                        href="{{ route('cart.index') }}"
                        class="ht-header__cart"
                        aria-label="Shopping Cart">

                        <i
                            class="bi bi-cart3"
                            aria-hidden="true">
                        </i>

                        <span
                            class="ht-header__badge"
                            aria-label="0 items in cart">

                            0

                        </span>

                    </a>


                    {{-- Authentication --}}
                    @guest

                        <a
                            href="{{ route('login') }}"
                            class="ht-header__login">

                            <i
                                class="bi bi-person"
                                aria-hidden="true">
                            </i>

                            <span>
                                Sign In
                            </span>

                        </a>

                    @else

                        <a
                            href="{{ route('profile.index') }}"
                            class="ht-header__profile"
                            aria-label="My Account">

                            <i
                                class="bi bi-person-circle"
                                aria-hidden="true">
                            </i>

                            <span>
                                My Account
                            </span>

                        </a>

                    @endguest

                </div>

            </div>

        </div>

    </div>


    {{-- ==================================================
        DESKTOP MEGA MENU
    =================================================== --}}
    @include('frontend.partials.header.mega-menu')


    {{-- ==================================================
        MOBILE OVERLAY
    =================================================== --}}
    <div
        class="ht-mobile-overlay"
        id="mobileMenuOverlay"
        hidden>
    </div>


    {{-- ==================================================
        MOBILE NAVIGATION
    =================================================== --}}
    @include('frontend.partials.header.mobile-menu')

</header>