@model Ks.Sf.Web.Model.RelatedEvents.RelatedEventsView

@using Telerik.Sitefinity.Frontend.Mvc.Helpers
@using Telerik.Sitefinity.Modules.Pages
@using Ks.Sf.Web.Model
@using Ks.Sf.Web.Model.Shared

@Html.StyleSheet(Url.WidgetContent("//f.fontdeck.com/s/css/9n0UDimOwEzZYFNKcKHAF3JtOlM/localhost/55321.css"), "head")
@Html.StyleSheet(Url.WidgetContent("~/ResourcePackages/TO/assets/dist/css/touchcarousel.css"), "head")
@Html.Script(ScriptRef.JQuery, "top", false)

<div class="container">
    <div class="row content">
        <div id="production-detail-related-events" class="touchcarousel black-and-white">
            <ul class="touchcarousel-container">
                <!-- TouchCarousel items, place any HTML content inside them (img tag is inserted as an example) -->
                @foreach (var item in Model.RelatedEvents)
                {
                    if (item.GetType() == typeof(ProductionListItem))
                    {
                        var prod = (ProductionListItem) item;
                        <li class="touchcarousel-item">
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 center-block pListItem">
                                <div>
                                    <div class="pTopImage" style="background-image: url('@prod.ImageUrl'); background-repeat: no-repeat; background-size: cover;"></div>
                                    <div class="pContentBox">

                                        <div>
                                            <span class="pType">@Html.Raw(prod.Genre)</span><br />
                                            <h3>@Html.Raw(prod.Title)</h3>
                                            <i>@Html.Raw(prod.Dates)</i><br />@Html.Raw(prod.Time)
                                            <span class="pVenue">
                                                <b>@Html.Raw(prod.Facility)</b>
                                                @if (!string.IsNullOrEmpty(prod.Hall))
                                                {
                                                    @Html.Raw(" | " + prod.Hall)
                                                }
                                            </span>
                                        </div>
                                    </div>
                                    <div class="pButton">
                                        <div class="ticket">
                                            <div class="ticketLeft"></div>
                                            <div class="ticketContent"><span>Info & Tickets</span></div>
                                            <div class="ticketRight"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    }
                    else
                    {
                        var adver = (AdvertisementListItem) item;
                        <li class="touchcarousel-item">
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 center-block pListItem pListItemMobile">
                                <div style="background-image: url('@adver.Image'); background-repeat: no-repeat; background-size: cover;">
                                    <a href="@Url.Content(adver.Url)">
                                        <span></span>
                                    </a>
                                </div>
                            </div>
                        </li>
                    }
                }
            </ul>
        </div>
    </div>
</div>
@Html.Script(Url.WidgetContent("~/ResourcePackages/TO/assets/dist/js/jquery.touchcarousel-1.2.min.js", "bottom"))

<script>
    jQuery(function ($) {
        $("#production-detail-related-events").touchCarousel({
            itemsPerMove: 1,
            scrollbar: false,
            itemFallbackWidth: 300
        });
    });
</script>