@page "/clubcards"
@using TIAMSharedUI.Shared

<TopRow></TopRow>
<HeroSlider></HeroSlider>

<div class="container">
    <section>
        <div class="text-center">

            <h1>Clubcards</h1>
            <h2>Please select!</h2>
        </div>

        <div class="row">
            <div class="col-md-12 col-lg-6 col-xl-4 col-xs-12 mt-3">
                <div class="card">
                    <div style="position: relative;">
                        <img src="_content/TIAMSharedUI/images/club-card_bg.png" style="width: 100%;" />
                        <div id="overlay" class="text-center p-3" style="position: absolute; top: 0px; left:0px; width:100%; height:100%; margin:auto">

                            <!--img src="_content/TIAMSharedUI/images/png-logo-0.png" alt="TourIam Logo" title="TourIAm Logo" style="width: 40px;" /-->
                            <div style="height:100%; margin: 0 auto; align-items: center; justify-content: center; display:grid;">
                                <h2>TOUR I AM</h2>
                                <span>#1234567891234567</span>
                                <hr style="margin-top: 0.5em; margin-bottom: 0.5em;" />
                                <span class="cardholder">Card holder's name</span>
                                <hr style="margin-top: 0.5em; margin-bottom: 0.5em;" />
                                <span class="expires">Expires: </span>
                                <span class="date">3 days</span>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-md-12 col-lg-6 col-xl-4 col-xs-12 mt-3">
                <div class="card">
                    <div style="position: relative;">
                        <img src="_content/TIAMSharedUI/images/club-card_bg.png" style="width: 100%;" />
                        <div id="overlay" class="text-center p-3" style="position: absolute; top: 0px; left:0px; width:100%; height:100%; margin:auto">

                            <!--img src="_content/TIAMSharedUI/images/png-logo-0.png" alt="TourIam Logo" title="TourIAm Logo" style="width: 40px;" /-->
                            <div style="height:100%; margin: 0 auto; align-items: center; justify-content: center; display:grid;">
                                <h2>TOUR I AM</h2>
                                <span>#1234567891234567</span>
                                <hr style="margin-top: 0.5em; margin-bottom: 0.5em;" />
                                <span class="cardholder">Card holder's name</span>
                                <hr style="margin-top: 0.5em; margin-bottom: 0.5em;" />
                                <span class="expires">Expires: </span>
                                <span class="date">7 days</span>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-md-12 col-lg-6 col-xl-4 col-xs-12 mt-3">
                <div class="card">
                    <div style="position: relative;">
                        <img src="_content/TIAMSharedUI/images/club-card_bg.png" style="width: 100%;" />
                        <div id="overlay" class="text-center p-3" style="position: absolute; top: 0px; left:0px; width:100%; height:100%; margin:auto">

                            <!--img src="_content/TIAMSharedUI/images/png-logo-0.png" alt="TourIam Logo" title="TourIAm Logo" style="width: 40px;" /-->
                            <div style="height:100%; margin: 0 auto; align-items: center; justify-content: center; display:grid;">
                                <h2>TOUR I AM</h2>
                                <span>#1234567891234567</span>
                                <hr style="margin-top: 0.5em; margin-bottom: 0.5em;" />
                                <span class="cardholder">Card holder's name</span>
                                <hr style="margin-top: 0.5em; margin-bottom: 0.5em;" />
                                <span class="expires">Expires: </span>
                                <span class="date">10 days</span>
                            </div>
                        </div>

                    </div>

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

        
    </section>

    <FeaturedItems ItemType="1"></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>