<div class="web-app-top-bar">

    <a href="homepage.php" class="logo-link">
        <img src="assets/img/logo-wide.svg" class="logo">
    </a>

    <div class="form-group input-with-start-icon m-0 search-wrapper" style="z-index: 1001;">

        <form class="search-form" action="search-results.php">

            <input type="text" class="form-control form-control-sm search-input" placeholder="Search here">

            <i class="icon icon-search start-icon"></i>

            <div id="search-history-wrapper" class="d-none">
                <div class="flex-between p-2 clear-all-search-history-bar" style="display : none">
                    <p class="small color-primary m-0"> Recent </p>
                    <a href="#" class="small color-primary m-0" id="clearAllSearchHistory"> Clear all history </a>
                </div>
                <ul class="reset-ul" id="search-history-list"></ul>
            </div>

        </form>
    </div>

    <div class="dropdown top-nav-custom-dropdown change-language-button prevent-auto-close">

        <a href="#" class="btn btn-link px-1" type="button" data-toggle="dropdown">
            <img src="assets/img/flags/kuwait.svg" class="w-20px me-2">
            <span class="btn-text me-2"> العربية </span>
            <i class="icon icon-chevron-down icon-xs arrow-icon"></i>
        </a>

        <div class="dropdown-menu p-3">

            <p class="color-gray small font-light mb-1"> Language </p>

            <div class="custom-radio-wrapper">
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="change-language-1" name="change-language" class="custom-control-input" checked>
                    <label class="custom-control-label" for="change-language-1"> English</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="change-language-2" name="change-language" class="custom-control-input">
                    <label class="custom-control-label" for="change-language-2"> العربية </label>
                </div>
            </div> <!-- custom-radio-wrapper -->

            <hr class="my-3" />

            <p class="color-gray small font-light mb-1"> Select Country </p>

            <div class="custom-radio-wrapper">
                <div class="custom-control custom-radio mb-2">
                    <input type="radio" id="change-country-1" name="change-country" class="custom-control-input" checked>
                    <label class="custom-control-label" for="change-country-1">
                        <div class="flex-start">
                            <img src="assets/img/flag_1.png" class="w-20px ms-1 me-2">
                            Kuwait
                        </div>
                    </label>
                </div>
                <div class="custom-control custom-radio mb-2">
                    <input type="radio" id="change-country-2" name="change-country" class="custom-control-input">
                    <label class="custom-control-label" for="change-country-2">
                        <div class="flex-start">
                            <img src="assets/img/flags/egypt.svg" class="w-20px ms-1 me-2">
                            Egypt
                        </div>
                    </label>
                </div>
                <div class="custom-control custom-radio mb-2">
                    <input type="radio" id="change-country-3" name="change-country" class="custom-control-input">
                    <label class="custom-control-label" for="change-country-3">
                        <div class="flex-start">
                            <img src="assets/img/flags/ksa.svg" class="w-20px ms-1 me-2">
                            Saudi Arabia
                        </div>
                    </label>
                </div>
            </div> <!-- custom-radio-wrapper -->

        </div>
    </div>

    <a href="product-cart.php" class="btn btn-link px-1 cart-button">
        <div class="relative">
            <i class="icon icon-cart me-2"></i>
            <span class="num"> 99 </span>
        </div>

        <span class="btn-text "> cart </span>
    </a>

    <a href="#" class="btn btn-link px-1 wishlist-button <?php echo (strpos($_SERVER['PHP_SELF'], 'profile-wishlist.php') !== false) ? 'active' : ''; ?>">
        <i class="icon icon-heart me-2"></i>
        <span class="btn-text "> wishlist </span>
    </a>

    <div class="dropdown top-nav-custom-dropdown custom-dropdown-lg notifications-button">

        <a href="#" class="px-1 btn btn-link notifications-button" type="button" data-toggle="dropdown">
            <i class="icon icon-bell me-2"></i>
            <span class="num"> 99 </span>
        </a>

        <div class="dropdown-menu p-0">

            <div class="start buttons-wrapper">

                <?php foreach (range(0, 20) as $i) { ?>

                    <a class="button-style-1 p-3 flex-start gap-2 unread" href="#">

                        <div class="start">

                            <div class="image-wrapper">
                                <img src="assets/img/notify-order-status-updated.png" class="image">
                            </div>

                        </div>

                        <div class="end">
                            <div class="flex-between align-items-start">
                                <p class="m-0 font-medium show-lines-2 w-70"> The competition is heating The competition is heating The competition is heating The competition is heating The competition is heating up! </p>
                                <p class="m-0 color-gray text-end w-30"> one month ago </p>
                            </div>
                            <p class="m-0 color-gray text-wrap-auto font-light show-lines-2"> Muhhamed Adel has supported Abss with 22 Purchase from the competition, boasting them to the rank 2 Muhhamed Adel has supported Abss with 22 Purchase from the competition, boasting them to the rank 2 Muhhamed Adel has supported Abss with 22 Purchase from the competition, boasting them to the rank 2 </p>
                        </div>

                    </a>

                <?php } ?>

            </div>

            <div class="end">
                <a href="#" class="btn btn-primary-faded no-border-radius w-100"> view all </a>
            </div>

        </div>

    </div>

    <a href="profile-my-profile.php" class="btn btn-link color-white">
        <img src="assets/img/thumbs/users/01.jpg" class="user-image w-35px h-35px rounded-circle object-cover me-2">
        <span class="btn-text me-2"> Ahmed </span>
    </a>

    <a href="#" class="btn btn-primary min-w-100 btn-sm" data-toggle="modal" data-target="#authModal"> Login </a>

    <div class="dropdown top-nav-custom-dropdown custom-dropdown-lg create-button">

        <a href="#" class="btn btn-link px-1" type="button" data-toggle="dropdown">
            <button type="button" class="btn btn-sm btn-primary min-w-100">
                Create
                <i class="end-center-icon icon icon-chevron-down icon-xs"></i>
            </button>
        </a>

        <div class="dropdown-menu p-0">
            <div class="buttons-wrapper">

                <a href="profile-create-post-1.php" class="button-style-1 p-3 flex-start gap-2">
                    <div class="start">
                        <img src="assets/img/notification.png" class="image base-box-shadow w-50px h-50px cover rounded-pill">
                    </div>
                    <div class="end">
                        <div class="flex-between">
                            <p class="m-0 font-medium"> Create Post </p>
                        </div>
                        <p class="m-0 color-gray text-wrap-auto font-light"> Share updates, promotions, or announcements to engage with your audience. </p>
                    </div>
                </a>

                <a href="profile-create-store-1.php" class="button-style-1 p-3 flex-start gap-2">
                    <div class="start">
                        <img src="assets/img/notification.png" class="image base-box-shadow w-50px h-50px cover rounded-pill">
                    </div>
                    <div class="end">
                        <div class="flex-between">
                            <p class="m-0 font-medium"> Create Store </p>
                        </div>
                        <p class="m-0 color-gray text-wrap-auto font-light"> Set up your own store to showcase and sell your products directly to customers. </p>
                    </div>
                </a>

            </div>
        </div>
    </div>

</div> <!-- web-app-top-bar -->

<div class="mobile-top-bar">

    <div class="start">
        <a href="shop.php">
            <img src="assets/img/logo-wide.svg">
        </a>
    </div>

    <div class="center">
        <a class="toggle-mobile-menu-button cursor-pointer">
            <i class="icon icon-bars icon-xl" aria-hidden="true"></i>
        </a>
    </div>


</div> <!-- mobile-top-bar -->

<div class="px-2 py-2 mobile-search-bar">

    <div class="form-group input-with-start-icon mb-0">
        <div class="relative">
            <input type="text" class="form-control" placeholder="placeholder">
            <i class="icon icon-search start-icon"></i>
        </div>
    </div>

</div>




<div class="mobile-search">

    <i class="icon icon-remove1 toggle-mobile-search-button color-white"></i>

    <h3 class="white"> Search </h3>

    <div class="search">

        <div class="search-container">

            <form class="search p-0" action="search-results.php">
                <input class="form-control search" type="text" placeholder="Search">

                <div id="search-history-mobile-wrapper" class="d-none">
                    <ul class="reset-ul" id="search-history-mobile-list"></ul>
                </div>


                <button class="reset-btn">
                    <i class="icon icon-search"></i>
                </button>
            </form>
        </div> <!-- search-container -->
    </div> <!-- search -->
</div> <!-- mobile-search -->

<div class="mobile-menu-popup">

    <div class="top">


        <div class="flex-between">

            <img src="assets/img/logo.png" class="w-50px">


            <a class="toggle-mobile-menu-button">
                <i class="icon icon-close-circle color-primary icon-lg"></i>
            </a>

        </div>


        <div class="menu-wrapper mb-4 mt-4">

            <ul class="links-list">

                <li>
                    <a href="product-cart.php" class="link-with-end-icon">
                        <div class="start">
                            <span class="text">Cart </span>
                        </div>
                        <div class="end">
                            <i class="icon icon-chevron-right icon-sm"></i>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="product-cart.php" class="link-with-end-icon">
                        <div class="start">
                            <span class="text">Wishlist </span>
                        </div>
                        <div class="end">
                            <i class="icon icon-chevron-right icon-sm"></i>
                        </div>
                    </a>
                </li>


                <li>
                    <a href="product-cart.php" class="link-with-end-icon">
                        <div class="start">
                            <span class="text">Notifications </span>
                            <span class="num"> 99 </span>
                        </div>
                        <div class="end">
                            <i class="icon icon-chevron-right icon-sm"></i>
                        </div>
                    </a>
                </li>


            </ul>


        </div> <!-- menu-wrapper -->

        <hr>

        <div class="p-3">

            <div class="d-block">

                <p class="mb-0 small color-gray mb-2"> Language</p>

                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="lang1" name="lang" class="custom-control-input" checked>
                    <label class="custom-control-label" for="lang1"> English </label>
                </div>

                <div class="custom-control custom-radio custom-control-inline m-0">
                    <input type="radio" id="lang2" name="lang" class="custom-control-input">
                    <label class="custom-control-label" for="lang2"> العربية </label>
                </div>

            </div>

            <hr />

            <div class="d-block">

                <p class="mb-0 small color-gray mb-2"> Select Country </p>

                <div class="d-block">

                    <div class="custom-control custom-radio">
                        <input type="radio" id="country1" name="country" class="custom-control-input" checked>
                        <label class="custom-control-label" for="country1"> <img src="assets/img/icons/flag-kuwait.svg" class=" ms-2" /> Kuwait </label>
                    </div>

                    <div class="custom-control custom-radio">
                        <input type="radio" id="country2" name="country" class="custom-control-input">
                        <label class="custom-control-label" for="country2"> <img src="assets/img/icons/flag-egypt.svg" class=" ms-2" /> Egypt </label>
                    </div>

                    <div class="custom-control custom-radio">
                        <input type="radio" id="country3" name="country" class="custom-control-input">
                        <label class="custom-control-label" for="country3"> <img src="assets/img/icons/flag-saudi-arabia.svg" class=" ms-2" /> Saudi Arabia </label>
                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="bottom">
        <a href="#" class="btn btn-primary min-w-170 btn-sm w-100" data-toggle="modal" data-target="#authModal"> Login </a>
    </div>

</div> <!-- mobile-menu-popup -->

<div class="hello-bar d-none">
    <p class="lead m-0 me-3"> Welcome to kashkom, download the application, share with your friends and win now

    </p>
    <div class="d-flex">
        <a href="#" class="me-3"> <img src="assets/img/app-store.svg" class="w-110px"> </a>
        <a href="#"> <img src="assets/img/google-play.svg" class="w-110px"></a>
    </div>
</div>

<div class="modal fade" id="authModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-body p-0">

                <?php

                $authModal = isset($_GET['authModal']) ? $_GET['authModal'] : null;

                switch ($authModal) {
                    case "1":
                        include 'auth-1.1.php';
                        break;
                    case "2":
                        include 'auth-1.2.php';
                        break;
                    case "3":
                        include 'auth-1.3.php';
                        break;
                    case "4":
                        include 'auth-1.4.php';
                        break;
                    default:
                        echo "authModal=1";
                        break;
                }

                ?>

            </div>
        </div>
    </div>
</div>