<xf:title>{{ phrase('routes') }}</xf:title>

<xf:pageaction>
	<xf:button class="menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true">{{ phrase('add_route...') }}</xf:button>
		<div class="menu" data-menu="menu" aria-hidden="true">
			<div class="menu-content">
				<h3 class="menu-header">{{ phrase('add_route...') }}</h3>

				<xf:foreach loop="$routeTypes" key="$routeTypeId" value="$routeType">
					<a href="{{ link('routes/add', null, {'type': $routeTypeId}) }}"  class="menu-linkRow">{$routeType}</a>
				</xf:foreach>
			</div>
		</div>
</xf:pageaction>

<div class="block">
	<div class="block-container">
		<h2 class="block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
			<span class="hScroller-scroll">
			<xf:foreach loop="$routeTypes" key="$routeTypeId" value="$routeType">
				<a class="tabs-tab {{ $routeTypeId == $selectedTab ? 'is-active' : '' }}"
					role="tab"
					tabindex="0"
					aria-controls="route-{$routeTypeId}"
					id="{{ $routeTypeId != 'public' ? $routeTypeId : '' }}">{$routeType}</a>
			</xf:foreach>
			</span>
		</h2>
		<ul class="tabPanes">
			<xf:foreach loop="$routeTypes" key="$routeTypeId" value="$routeType">
				<li class="block-body {{ $routeTypeId == $selectedTab ? 'is-active' : '' }}"
					role="tabpanel" id="route-{$routeTypeId}">

					<xf:if is="{$routesGrouped.{$routeTypeId}} is not empty">
						<xf:datalist>
							<xf:foreach loop="{$routesGrouped.{$routeTypeId}}" value="$route">
								<xf:datarow
									hash="{$route.route_id}"
									href="{{ link('routes/edit', $route) }}"
									label="{$route.unique_name}"
									hint="{$route.route_prefix}/{$route.format}"
									delete="{{ link('routes/delete', $route) }}"
									dir="auto"/>
							</xf:foreach>
						</xf:datalist>
					<xf:else />
						<div class="block-row">{{ phrase('no_items_have_been_created_yet') }}</div>
					</xf:if>
				</li>
			</xf:foreach>
		</ul>
		<div class="block-footer">
			<span class="block-footer-counter">{{ display_totals($totalRoutes) }}</span>
		</div>
	</div>
</div>