@inherits LayoutComponentBase

@inject NavigationManager _navigationManager

<TelerikRootComponent>
    <!-- Header
    ============================================= -->
    <header id="header" class="full-header header-size-custom" data-sticky-shrink="false">
    <div id="header-wrap">
        <div class="container-fluid">
            <div class="header-row flex-lg-row-reverse">

                
                <!-- Logo and sign-in buttons
                ============================================= -->
                <div id="logo" class="me-lg-0 ms-lg-auto">
                    @if(Session.Count == 0)
                    {
                        <a class="menu-link text-nowrap" style="font-size:medium" href="https://accounts.google.com/o/oauth2/v2/auth?access_type=online&client_id=@GoogleClientId&redirect_uri=@GoogleRedirect&response_type=code&scope=profile email&prompt=consent"><div>Sign in with Google</div></a>
                        <a class="menu-link text-nowrap" style="font-size:medium" href="https://www.facebook.com/v20.0/dialog/oauth?client_id=@FacebookId&redirect_uri=@FacebookRedirect&scope="><div>Sign in with Facebook</div></a>
                    }
                    else
                    {
                        <a class="menu-link text-nowrap" style="font-size:medium"><div>@Greeting</div></a>

                        <a class="menu-link text-nowrap" href="#" style="font-size:medium" @onclick="SignOut"><div>Sign Out</div></a>
                    }

                    <a href="demo-car.html">
                        <img class="logo-default" srcset="img/logo.jpg, img/logo.jpg@2x.png 2x" src="img/logo.jpg@2x.png" alt="TheShopCritics Logo">
                    </a>
                </div><!-- #logo end -->


                <div class="primary-menu-trigger">
                    <button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
                        <span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
                    </button>
                </div>

                <!-- Primary Navigation
                ============================================= -->
                <nav class="primary-menu with-arrows">
                    <ul class="menu-container">
                        <li class="menu-item current"><a class="menu-link" href=""><div>Home</div></a></li>
                        <!-- Mega Menu -->
                        <li class="menu-item"><a class="menu-link" href="/browse"><div>Browse By State</div></a></li>
                        <li class="menu-item"><a class="menu-link" href="demo-car-dealers.html"><div>Dealers</div></a></li>
                        <li class="menu-item"><a class="menu-link" href="demo-car-accessories.html"><div>Accessories</div></a></li>
                        <li class="menu-item"><a class="menu-link" href="demo-car-interiors.html"><div>Interiors</div></a></li>
                        <li class="menu-item"><a class="menu-link" href="demo-car-faqs.html"><div>FAQs</div></a></li>
                        <li class="menu-item"><a class="menu-link" href="demo-car-blog.html"><div>Blog</div></a></li>
                        <li class="menu-item"><a class="menu-link" href="demo-car-contact.html"><div>Contacts</div></a></li>                            
                    </ul>
                </nav><!-- #primary-menu end -->

            </div>
        </div>
    </div>
    <div class="header-wrap-clone"></div>
    </header><!-- #header end -->  

    <main>
        @Body
    </main>
    

    <div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>

    <a class="dismiss">🗙</a>
    </div>

    <!-- Font Imports -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mukta+Vaani:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Core Style -->
    <link rel="stylesheet" href="style.css">

    <!-- Font Icons -->
    <link rel="stylesheet" href="css/font-icons.css">
    <link rel="stylesheet" href="demos/car/css/car-icons/style.css">

    <!-- Plugins/Components CSS -->
    <link rel="stylesheet" href="css/components/bs-select.css"><!-- Bootstrap Select CSS -->
    <link rel="stylesheet" href="css/components/bs-switches.css"><!-- Bootstrap Switch CSS -->
    <link rel="stylesheet" href="css/components/datepicker.css"><!-- Datepicker Slider CSS -->
    <link rel="stylesheet" href="css/components/ion.rangeslider.css"><!-- Range Slider CSS -->
    <!-- Niche Demos -->
    <link rel="stylesheet" href="demos/car/car.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- JavaScripts
    ============================================= -->
    <script src="js/plugins.min.js"></script>
    <script src="js/functions.bundle.js"></script>

    <!-- Bootstrap Select Plugin -->
    <script src="js/components/bs-select.js"></script>

    <!-- Bootstrap Switch Plugin -->
    <script src="js/components/bs-switches.js"></script>

    <!-- Datepicker Slider Plugin -->
    <script src="js/components/datepicker.js"></script>

    <!-- Range Slider Plugin -->
    <script src="js/components/rangeslider.min.js"></script>

    <script>
        jQuery(".bt-switch").bootstrapSwitch();

        jQuery(function () {
            jQuery('.travel-date-group').datepicker({
                autoclose: true,
                startView: 2,
                minViewMode: 2,
                todayHighlight: false,
                defaultViewDate: { year: 2010, month: 01, day: 01 }
            });

            jQuery(".price-range").ionRangeSlider({
                type: "double",
                grid: true,
                min: 0,
                max: 10000,
                from: 1000,
                prefix: "$"
            });
        });
    </script>
</TelerikRootComponent>