<% cache 'RestaurantContainerPage' %>
<div class="hero-image-text">
    <div class="vcenter-parent">
        <div class="vcenter">
            <div class="container">
                <h1>$Title</h1>
            </div>
        </div>
    </div>
</div>

<div class="grid-generic-container">
    <div class="grid-generic-filters">
        <div class="container">
            <div class="grid-generic-filter-btns">
                <a href="{$Top.Link}<% if $CurrentSort %>?Sort={$CurrentSort}<% end_if %>"
                   class="btn <% if not $LocationVar %>btn-pink<% else %>btn-grey<% end_if %> disabled">View all</a>
                <% loop $Locations %>
                    <% if $Up.CurrentSort %>
                        <a href="{$Top.Link}?location={$ID}&Sort={$Up.CurrentSort}" class="btn <% if $Up.LocationVar == $ID %>btn-pink<% else %>btn-grey<% end_if %>">$Title</a>
                    <% else %>
                        <a href="{$Top.Link}?location={$ID}" class="btn <% if $Up.LocationVar == $ID %>btn-pink<% else %>btn-grey<% end_if %>">$Title</a>
                    <% end_if %>
                <% end_loop %>
            </div>
            <form>
                <div class="form-group lg-select">
                    <select class="form-control" onChange="window.location.href=this.value">
                        <option value="{$AbsoluteLink}?Sort=Title_ASC<% if $LocationVar %>&location={$LocationVar}<% end_if %>"<% if $CurrentSort == 'Title_ASC' %> selected<% end_if %>>A-Z</option>
                        <option value="{$AbsoluteLink}?Sort=Title_DESC<% if $LocationVar %>&location={$LocationVar}<% end_if %>"<% 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 class="container container-dynamic">
        <% include PaginatedRestaurants %>
    </div>
</div>
<% end_cache %>
