
<script src="node_modules/delayed-scroll-restoration-polyfill/index.js"></script>


<section class="hero-image-text" <% if $Locale.FindAShowBanner %>style="background-image: url({$Locale.FindAShowBanner.URL});"<% end_if %>>
    <div class="vcenter-parent">
        <div class="vcenter">
            <div class="container">
                <h1>$Locale.Title shows</h1>
            </div>
        </div>
    </div>
</section>

<section class="show-filters">
    <div class="container">
        <form method="get" action="{$Link}">
            <div class="form-group">
                <input type="text" name="Search" class="form-control form-search" placeholder="Search for a comedian/show" <% if $Filters.Search %>value="{$Filters.Search}"<% end_if %>>
            </div>
            <div class="form-group search-select">
                <select class="form-control" name="VenueID">
                    <option value="0">All venues</option>
                    <% loop $Venues.Sort(Title, ASC) %>
                        <% if $Top.Locale.ID == 1 && $CityID == 1 || $Top.Locale.ID == 2 && $CityID == 2 || $Top.Locale.ID == 3 && $CityID != 1 && $CityID != 2 %>
                            <option value="{$ID}" <% if $Top.Filters.VenueID == $ID %>selected<% end_if %>>$Title</option>
                        <% end_if %>
                    <% end_loop %>
                </select>
                {$SVG('select-arrow').extraClass('svg-arrow').Width('11').Height('9')}
            </div>

            <div class="form-group search-select">
                <select class="form-control" name="CategoryID">
                    <option value="0">All categories</option>
                    <% loop $ShowCategories.Sort('Title ASC') %>
                        <option value="{$ID}" <% if $Top.Filters.CategoryID == $ID %>selected<% end_if %>>$Title</option>
                    <% end_loop %>
                </select>
                {$SVG('select-arrow').extraClass('svg-arrow').Width('11').Height('9')}
            </div>
            <div class="form-group date-field">
                <input type="text" class="form-control form-date" name="StartTime" placeholder="From date" <% if $Filters.StartTime %>value="{$Filters.StartTime}"<% else_if $Filters.DayStart %>value="$Filters.DayStart"<% end_if %>>
            </div>
            <div class="form-group date-field">
                <input type="text" class="form-control form-date" name="EndTime" placeholder="To date" <% if $Filters.EndTime %>value="{$Filters.EndTime}"<% else_if $Filters.DayEnd %>value="$Filters.DayEnd"<% end_if %>>
            </div>
            <button type="submit" class="btn btn-charcoal"><span class="hidden-xs">Go</span><span class="visible-xs">Search</span></button>
        </form>
    </div>
</section>
<% if $Filters %>
    <section class="show-filters-toolbar">
        <div class="container">
            <p>Showing $PaginatedShows.Count of $PaginatedShows.TotalItems results
                <% if $Filters.Search %>for <strong>'$Filters.Search'</strong><% end_if %>
                <% if $Filters.Venue.ID > 0 %>at <a href="$Filters.Venue.Link"><strong>$Filters.Venue.Title</strong></a><% end_if %>
                <% if $Filters.Category %>featuring <strong>$Filters.Category.Title</strong><% end_if %> <%-- TODO: "featuring" "type of" etc. --%>
                <% if $Filters.StartTime || $Filters.DayStart %>from <strong><% if $Filters.DayStart %>$DisplayFormat($Filters.DayStart)<% else %>$DisplayFormat($Filters.StartTime)<% end_if %></strong><% end_if %>
                <% if $Filters.EndTime || $Filters.DayEnd %>to <strong><% if $Filters.DayEnd %>$DisplayFormat($Filters.DayEnd)<% else %>$DisplayFormat($Filters.EndTime)<% end_if %></strong><% end_if %>
            </p>
            <a class="btn btn-pink" href={$Top.Link}>Clear all filters</a>
        </div>
    </section>
<% end_if %>
<section class="show-sort">
    <div class="container">
        <div class="form-group search-select">
            <select class="form-control" onChange="window.location.href=this.value">
                <option value="">Filter</option>
                <option value="<% if $Filters %>{$FilterLink}&<% else %>{$AbsoluteLink}?<% end_if %>Sort=Featured_DESC"<% if $CurrentSort == 'Featured_DESC' %> selected<% end_if %>>Featured First</option>
                <option value="<% if $Filters %>{$FilterLink}&<% else %>{$AbsoluteLink}?<% end_if %>Sort=Featured_ASC"<% if $CurrentSort == 'Featured_ASC' %> selected<% end_if %>>Featured Last</option>
                <option value="<% if $Filters %>{$FilterLink}&<% else %>{$AbsoluteLink}?<% end_if %>Sort=Title_ASC"<% if $CurrentSort == 'Title_ASC' %> selected<% end_if %>>A-Z</option>
                <option value="<% if $Filters %>{$FilterLink}&<% else %>{$AbsoluteLink}?<% end_if %>Sort=Title_DESC"<% if $CurrentSort == 'Title_DESC' %> selected<% end_if %>>Z-A</option>
            </select>
            {$SVG('select-arrow').extraClass('svg-arrow hidden-xs').Width('11').Height('9')}
        </div>
    </div>
</section>
<section class="grid-shows-container"<% if $MobileSearchTerm && IsMobile %> id="MobileSearchTermScroll"<% end_if %>>
    <div class="container container-dynamic">
        <% include PaginatedShows %>
    </div>
</section>
