<% cache 'VenueContainerPage' %>
<section class="hero-image-text" <% if $BannerImage %>style="background: url({$BannerImage.URL});background-size: cover;"<% end_if %>>
    <div class="vcenter-parent">
        <div class="vcenter">
            <div class="container">
                <h1>$Title</h1>
            </div>
        </div>
    </div>
</section>

<div class="grid-generic-container">
    <div class="grid-generic-filters">
        <div class="container">
            <div class="grid-generic-filter-btns">
                <a href="{$Top.Link}"
                   class="btn <% if not $LocationVar %>btn-pink<% else %>btn-grey<% end_if %> disabled">View all</a>
                <% loop $getSwitchableLocations %>
                    <a href="{$Top.Link}?location={$ID}"
                       class="btn <% if $Up.LocationVar == $ID %>btn-pink<% else %>btn-grey<% end_if %>">$Title</a>
                <% end_loop %>
            </div>

            <div class="grid-generic-filter-btns-mobile">
                <form>
                    <div class="form-group lg-select">
                        <select class="form-control SubFilterSelect">
                            <% loop $getSwitchableLocations %>
                                <% if $Top.getLocationVar = $ID %>
                                    <option value="{$Top.Link}?location={$ID}">$Title</option>
                                <% end_if %>
                            <% end_loop %>

                            <option value="{$Top.Link}">View all</option>
                            <% loop $getSwitchableLocations %>
                                <% if $Top.getLocationVar != $ID %>
                                    <option value="{$Top.Link}?location={$ID}">$Title</option>
                                <% end_if %>
                            <% end_loop %>
                        </select>
                        {$SVG('select-arrow').extraClass('svg-arrow').Width('11').Height('9')}
                    </div>
                </form>

                <form>
                    <div class="form-group lg-select">
                        <select class="form-control" onChange="window.location.href=this.value">
                            <option value="{$AbsoluteLink}?Sort=Title_ASC"<% if $CurrentSort == 'Title_ASC' %> selected<% end_if %>>A-Z</option>
                            <option value="{$AbsoluteLink}?Sort=Title_DESC"<% if $CurrentSort == 'Title_DESC' %> selected<% end_if %>>Z-A</option>
                        </select>
                        {$SVG('select-arrow').extraClass('svg-arrow').Width('11').Height('9')}
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="container container-dynamic">
        <% include PaginatedVenues %>
    </div>
</div>
<% end_cache %>
