@model SaxModel_Online
@inject SaxLocaliser Localiser

<link rel="stylesheet" href="~/css/sax-selectSport.css?@Model.HrefVersion" />

<div id="dlgSelectSport" class="sax-dialog sax-form">

	<div class="container-fluid h-100">

		@* Selected Sport *@
		<div class="SelectedSport">
			<div class="row">
				<div class="col-12"><div class="sax-label">@Localiser["label.sport.selected"]</div></div>
				<div class="col-12"><div class="SelectedSportName"></div></div>
			</div>
			<div class="spacer2"></div>
		</div>

		@* Sport Filter *@
		<div class="SportFilter sax-form">
			<div class="row">
				<div class="col right"><div class="sax-label">@Localiser["label.search"]</div></div>
				<div class="fixed"><input type="search" id="ifSportFilter" class="sax-input" maxlength="16" autocomplete="off" onkeyup="sax.data.selectSport.fn.displaySports();" /></div>
			</div>
			<div class="spacer2"></div>
		</div>

		@* Available sports *@
		<div class="row">
			<div class="col"><div class="sax-label bottom">@Localiser["label.sports.available"]:</div></div>
		</div>

		<div class="row">

			<div class="col-12 sax-selectSport-sports AvailableSports"></div>

		</div>

	</div>

		<div class="sax-panel-item-template">
			<div class="sax-panel-item Sport">
				<div class="SportName"></div>
			</div>
		</div>

		<script src="~/js/sax-selectSport.js?@Model.HrefVersion"></script>

	</div>