@page "/restaurant"
@using TIAMSharedUI.Shared


<div class="container-fluid">
    <section class="py-5">

        <div class="row gx-4 gx-lg-5 align-items-center">
            <div class="col-md-6">

                <!--Slider here-->
                <div style="position: relative; width:100%; height: 100%">
                    <div style="position:absolute; top: 10px; left: 10px; z-index:999; ">
                        <h3 style="backdrop-filter: blur(5px); border-radius: 5px; color: white; padding: 3px; background-color: rgba(0,0,0,.2);">
                            10% DISCOUNT COUPON
                        </h3>
                    </div>
                    <div id="owl-restaurant" class="owl-carousel owl-theme">

                        <div class="item d-flex align-items-center">
                            <img src="_content/TIAMSharedUI/images/restaurant_1.jpg" class="my-auto" alt="The Last of us">

                        </div>
                        <div class="item d-flex align-items-center">
                            <img src="_content/TIAMSharedUI/images/restaurant_2.jpg" class="my-auto" alt="GTA V">

                        </div>
                        <div class="item d-flex align-items-center">
                            <img src="_content/TIAMSharedUI/images/restaurant_3.jpg" class="my-auto" alt="Mirror Edge">

                        </div>

                    </div>
                </div>

            </div>
            <div class="col-md-6">
                <div class="small mb-1">Authentic</div>
                <h1 class="display-5 fw-bolder">Mandragóra Restaurant</h1>
                <div class="fs-5 mb-5">
                    <!--span class="text-decoration-line-through">$45.00</span-->
                    <span>$10.00</span>
                </div>
                <p class="lead">A nice Hungarian restaurant that offers a delightful culinary journey with traditional dishes like goulash, stuffed peppers, and chimney cake, in a cozy, welcoming atmosphere.</p>
                <div class="d-flex">
                    
                </div>
            </div>
        </div>

    </section>
    <!-- Related items section-->
    <FeaturedItems ItemType="1"></FeaturedItems>
</div>
<script>
    $(document).ready(function () {

        $("#owl-restaurant").owlCarousel({

            navigation: true, // Show next and prev buttons

            slideSpeed: 300,
            paginationSpeed: 400,

            items: 1,
            itemsDesktop: false,
            itemsDesktopSmall: false,
            itemsTablet: false,
            itemsMobile: false

        });

    });
</script>

@code {

}