@page "/events"
@using TIAMSharedUI.Shared
@using TIAMWebApp.Shared.Application.Models
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI

<HeroSlider SliderItems="@SliderItems"></HeroSlider>

<div class="container">
    <section class="game-section" style="max-width: 100%; overflow-x:hidden">
        <div class="text-center">

            <h1>Tours</h1>
            <h2>Please select!</h2>
        </div>
        <div class="owl-carousel custom-carousel owl-theme">

            @{
                foreach (var item in MockEvents)
                {
                    <div class="item" style="background-image: url(@item.ImageUrl);">

                        <div class="item-desc" style="height: 100%; background-color: rgba(0,0,0,0.3);">
                            <!--h3>item.Name</h3-->                      

                            <h3 class="card-title" style="margin-top: 80px;">@item.Name</h3>
                            <p>@item.DateAndTime</p>
                            <p>@item.Description</p>
                            <p>@item.Location</p>
                            <div class="glass" style="position: absolute; top:0px; left:0px; padding:10px; width:100%">
                                <span>by</span>
                                <svg width="30%" viewBox="0 0 112 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Logó"><path d="M99.636,13.719c-0.569,1.804 -1.048,3.323 -1.542,4.889l3.215,0c-0.549,-1.606 -1.062,-3.104 -1.673,-4.889m11.754,11.595c-2.575,0 -4.95,0.027 -7.323,-0.036c-0.267,-0.007 -0.637,-0.476 -0.76,-0.805c-0.592,-1.582 -0.567,-1.591 -2.263,-1.592c-1.452,0 -2.903,0 -4.316,0c-0.913,2.437 -0.913,2.437 -3.473,2.437l-3.674,0c2.395,-6.454 4.723,-12.727 7.07,-19.049c2.38,0 4.725,-0.037 7.065,0.044c0.312,0.01 0.736,0.565 0.884,0.953c2.099,5.504 4.159,11.022 6.228,16.537c0.16,0.426 0.318,0.854 0.562,1.511" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><path d="M89.146,6.271c-2.087,2.974 -4.038,5.753 -6.039,8.604c1.968,3.411 3.942,6.833 6.02,10.434c-2.908,0 -5.596,0.014 -8.284,-0.025c-0.228,-0.003 -0.526,-0.317 -0.663,-0.559c-0.559,-0.986 -1.068,-2.001 -1.698,-3.202c-0.649,1.062 -1.269,1.982 -1.786,2.957c-0.348,0.658 -0.797,0.87 -1.523,0.853c-1.934,-0.045 -3.869,-0.015 -6.019,-0.015c1.733,-2.622 3.245,-5.103 4.963,-7.431c0.923,-1.251 0.94,-2.138 0.063,-3.432c-1.751,-2.579 -3.285,-5.306 -4.969,-8.072c0.297,-0.045 0.516,-0.107 0.735,-0.108c2.344,-0.007 4.689,0.018 7.032,-0.019c0.622,-0.009 0.972,0.195 1.247,0.741c0.475,0.94 1.019,1.846 1.607,2.898c0.707,-1.095 1.311,-2.088 1.982,-3.033c0.192,-0.269 0.577,-0.558 0.879,-0.565c2.058,-0.05 4.117,-0.026 6.453,-0.026" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><path d="M59.654,6.335l0,5.691l-5.73,0l0,13.193l-7.515,0l0,-13.147l-5.731,0l0,-5.737l18.976,0Z" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><rect x="61.187" y="6.342" width="6.698" height="18.911" style="fill:#fff;fill-opacity:0.8;"></rect><path d="M28.354,21.366c0.306,4.69 -5.098,5.2 -6.831,2.855c-2.169,-2.934 -5.05,-2.797 -6.619,-1.438c-1.569,-1.359 -4.449,-1.496 -6.618,1.438c-1.733,2.345 -7.137,1.835 -6.831,-2.855c0,0 -2.763,4.258 0.611,8.055c3.263,3.671 8.689,3.784 12.032,0.918c0.305,-0.262 0.568,-0.53 0.806,-0.802c0.238,0.272 0.501,0.54 0.807,0.802c3.343,2.866 8.768,2.753 12.031,-0.918c3.375,-3.796 0.612,-8.055 0.612,-8.055Z" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><path d="M28.354,11.37c0.306,-4.69 -5.098,-5.2 -6.831,-2.855c-2.169,2.934 -5.05,2.797 -6.619,1.438c-1.569,1.359 -4.449,1.496 -6.618,-1.438c-1.733,-2.345 -7.137,-1.835 -6.831,2.855c0,0 -2.763,-4.258 0.611,-8.055c3.263,-3.671 8.689,-3.784 12.032,-0.918c0.305,0.262 0.568,0.53 0.806,0.802c0.238,-0.272 0.501,-0.54 0.807,-0.802c3.343,-2.866 8.768,-2.753 12.031,0.918c3.375,3.796 0.612,8.055 0.612,8.055Z" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><circle cx="12.241" cy="16.368" r="1.332" style="fill:#fff;fill-opacity:0.8;"></circle><circle cx="16.902" cy="16.368" r="1.332" style="fill:#fff;fill-opacity:0.8;"></circle></g></svg>
                            </div>

                        </div>

                    </div>
                }
            }






            <a href="login">
                
            </a>

        </div>
    </section>

    <FeaturedItems ItemType="0"></FeaturedItems>

</div>

<script>
    $(".custom-carousel").owlCarousel({
        autoWidth: true,
        loop: true
    });
    $(document).ready(function () {
        $(".custom-carousel .item").click(function () {
            $(".custom-carousel .item").not($(this)).removeClass("active");
            $(this).toggleClass("active");
        });
    });
</script>


@code {

    public List<HeroSliderItem> SliderItems = new List<HeroSliderItem>
    {
        new HeroSliderItem
        {
            Title = "Welcome to TIAM",
            ImageUrl = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        },
        new HeroSliderItem
        {
            Title = "Welcome to TIAM",
            ImageUrl = "https://images.unsplash.com/photo-1501527459-2d5409f8cf9f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        },
        new HeroSliderItem
        {
            Title = "Welcome to TIAM",
            ImageUrl = "https://images.unsplash.com/photo-1526907858462-4b1c6b0a0dcc?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        }
    };

    public List<Event> MockEvents = new List<Event>
    {
        new Event("HONEYBEAST", "A Honeybeast egyedisége abban rejlik, hogy a popzenét rengeteg különféle irányból közelítik meg - hol vidám, hol szomorú, hol pörgős, hogy lassú, koncertjükön az érzelmek széles skáláját élhetjük át együtt.", "2024.05.03", "Budapest Park", "https://tixa.hu/kepek/0027/320/27870-1_20231214141702.jpg"),
        new Event("VAD FRUTTIK", "A kék a tenger és az ég színe, a nyílt terekkel, valamint a képzelettel és tágassággal társul - végtelen kékség május 3-án a Budapest Parkban!", "2024.04.26", "Budapest Park", "https://tixa.hu/kepek/0027/768/27692-1_20231129185842.jpg"),
        new Event("DEBORAH DE LUCA", "DEBORAH DE LUCA 2024-ben Magyarországon csak a Budapest Park színpadán", "2024.08.19", "Budapest Park", "https://tixa.hu/kepek/0028/768/28535-1_20240118172423.jpg"),
        new Event("TOTAL DANCE CABRIO", "Ha nyár, akkor Total Dance Cabrio! Ülj be mellénk a cabrioba, és hagyd, hogy visszarepítsünk a 90-es és 2000-es évekbe! ", "2024.04.26", "Budapest Park", "https://tixa.hu/kepek/0027/768/27829-1_20231206193253.jpg"),
        new Event("HONEYBEAST", "A Honeybeast egyedisége abban rejlik, hogy a popzenét rengeteg különféle irányból közelítik meg - hol vidám, hol szomorú, hol pörgős, hogy lassú, koncertjükön az érzelmek széles skáláját élhetjük át együtt.", "2024.05.03", "Budapest Park", "https://tixa.hu/kepek/0027/320/27870-1_20231214141702.jpg"),
        new Event("VAD FRUTTIK", "A kék a tenger és az ég színe, a nyílt terekkel, valamint a képzelettel és tágassággal társul - végtelen kékség május 3-án a Budapest Parkban!", "2024.04.26", "Budapest Park", "https://tixa.hu/kepek/0027/768/27692-1_20231129185842.jpg"),
        new Event("DEBORAH DE LUCA", "DEBORAH DE LUCA 2024-ben Magyarországon csak a Budapest Park színpadán", "2024.08.19", "Budapest Park", "https://tixa.hu/kepek/0028/768/28535-1_20240118172423.jpg"),
        new Event("TOTAL DANCE CABRIO", "Ha nyár, akkor Total Dance Cabrio! Ülj be mellénk a cabrioba, és hagyd, hogy visszarepítsünk a 90-es és 2000-es évekbe! ", "2024.04.26", "Budapest Park", "https://tixa.hu/kepek/0027/768/27829-1_20231206193253.jpg"),



    };
        }