@page "/hotel"
@using TIAMSharedUI.Shared
@inject NavigationManager navManager

<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-->
                <style>
                    .owl-stage-outer  {
                        border-radius: 15px;
                    }
                    
                    
                </style>
                <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">
                    <button class="btn btn-primary" @onclick="next">Book a transfer now</button>
                </div>
            </div>
            <div class="col-md-12">
                <div class="embed-responsive">
                    <h3> Location: </h3>
                    <p>Kacsa u. 13, Budapest</p>

                    @{
                        var aKey = "AIzaSyAyEYJkpt2KDa3SJ34UNWO4-dNOJKmUtF8";
                        var gUrl = "https://www.google.com/maps/embed/v1/place?key=" + aKey + "&q=Space+Needle,Budapest+HU";
                    }
                    <iframe class="embed-responsive-item"
                            loading="lazy"
                            width="100%"
                            style="height: 30vh; border-radius: 15px;"
                            referrerpolicy="no-referrer-when-downgrade"
                            src=@gUrl>
                    </iframe>
                    
                </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 {
    public void next() => navManager.NavigateTo("/transfer");

}