@model Model_Account
@inject SaxLocaliser Localiser

<div class="sax-panel-section ProfileSports sax-populating">

	<div class="sax-panel-info">

		<div class="sax-header">
			<div class="row">
				<div class="col"><div class="sax-caption">@Localiser["account.caption.profile.sports"]</div></div>
				<div class="fixed">
					@* Burger menu *@
					<ul class="nav navbar-nav navbar-light navbar-right sax-burger">
						<li class="dropdown-toggle caret-off">
							<a href="#" class="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="navbar-toggler-icon"></span></a>
							<ul class="dropdown-menu dropdown-menu-right sax-dropdown-menu">
								<li class="sax-dropdown-item sax-action sax-add"><div class="sax-label">@(Localiser["label.add"])</div></li>
							</ul>
						</li>
					</ul>
					@* Filter item templates *@
					<div class="sax-panel-item-template">
						@* Filter Burger dropdown template - ul is ignored *@
						<ul class="sax-dropdown-menu ProfileSports">
							<li class="sax-dropdown-item sax-action"><div class="sax-label">...</div></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="sax-content">
			<div class="sax-panel-results ProfileSports">
			</div>
		</div>

		@* Item templates *@
		<div class="sax-panel-item-template">
			@* Sport template *@
			<div class="sax-panel-item ProfileSport">
				<div class="sax-header row">
					<div class="col"><div class="sax-action sax-edit SportName"></div></div>
					<div class="fixed">
						@* Burger menu *@
						<ul class="nav navbar-nav navbar-light navbar-right sax-burger">
							<li class="dropdown-toggle caret-off">
								<a href="#" class="dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="navbar-toggler-icon"></span></a>
								<ul class="dropdown-menu dropdown-menu-right sax-dropdown-menu">
									<li class="sax-dropdown-item sax-action sax-edit"><div class="sax-label">@(Localiser["label.update"])</div></li>
									<li class="sax-dropdown-item sax-action sax-experience"><div class="sax-label">@(Localiser["label.experience"])</div></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
				<div class="sax-content">
					<div class="row">
						<div class="col-sm-6 SportParticipation sax-note">@Localiser["label.participation"]:&nbsp;<span class="SportParticipationValue"></span></div>
						<div class="col-sm-6 SportOfficiating sax-note">@Localiser["label.officiating"]:&nbsp;<span class="SportOfficiatingValue"></span></div>
					</div>
				</div>
			</div>
			@* Sport Burger dropdown template - ul is ignored *@
			<ul class="sax-dropdown-menu ProfileSport">
				<li class="sax-dropdown-item sax-action"><div class="sax-label">...</div></li>
			</ul>
		</div>

	</div>

</div>

@using (Html.BeginForm(FormMethod.Post, new { @id = "frmProfileSportId", @class = "sax-form", @onSubmit = "return false;" }))
{
	@Html.HiddenFor(model => model.UserSportId, new { @id = "", @class = "UserSportId" })
}

<div id="dlgProfileSport" class="sax-dialog">

	<div class="spacer"></div>
	@using (Html.BeginForm(FormMethod.Post, new { @id = "frmProfileSport", @class = "sax-form", @onSubmit = "return false;" }))
	{
		<input type="hidden" class="UserSportId" name="UserSportId" />
		<input type="hidden" class="ProfileSportExists" name="ProfileSportExists" />

		@* Sport *@
		<div class="sax-form-control ProfileSportId">
			<div class="row">
				<div class="col-sm-3">
					<div class="sax-label">
						<label for="ifProfileSport"><span>@Localiser["label.sport"]</span><span class="required">&nbsp;*</span></label>
					</div>
				</div>
				<div class="col-sm">
					<div class="sax-control row">
						<input type="hidden" id="ifProfileSportId" class="ProfileSportId" name="ProfileSportId" />
						<div class="col"><input type="text" id="ifProfileSport" class="ProfileSport sax-input" name="ProfileSport" readonly="readonly" maxlength=128 /></div>
						<div class="fixed"><button class="SelectSport sax-button" style="min-width:auto;margin-left:4px;padding:4px 6px" onclick="sax.selectUserSport()">@Localiser["label.select"]</button></div>
					</div>
					<div class="sax-message"></div>
				</div>
			</div>
		</div>

		@* About *@
		<div class="sax-form-control ProfileSportAbout">
			<div class="row">
				<div class="col-sm-3">
					<div class="sax-label">
						<label for="ifProfileSportAbout"><span>@Localiser["label.about"]</span></label>
					</div>
				</div>
				<div class="col-sm">
					<div class="sax-control">
						@Html.TextAreaFor(model => model.ProfileSportAbout, new { @id = "ifProfileSportAbout", @class = "ProfileSportAbout sax-textarea", @rows = 4, @maxlength = @Model.GetControlMaxLength(SaxDbDfn_Core.ColumnIdx.UserSport_About) })
					</div>
					<div class="sax-message"></div>
				</div>
			</div>
		</div>

		@* Sport Participation *@
		<div class="sax-form-control ProfileSportParticipation">
			<div class="row">
				<div class="col-sm-3">
					<div class="sax-label">
						<label for="cbProfileSportParticipation"><span>@Localiser["label.participation"]</span></label>
					</div>
				</div>
				<div class="col-sm">
					<div class="sax-control">
						@Html.DropDownListFor(model => model.ProfileSportParticipationCode, Model.SportParticipationCodesForSelect, "", new { @id = "cbProfileSportParticipation", @class = "ProfileSportParticipation sax-select" })
					</div>
					<div class="sax-message"></div>
				</div>
			</div>
		</div>

		@* Sport Officiating *@
		<div class="sax-form-control ProfileSportOfficiating">
			<div class="row">
				<div class="col-sm-3">
					<div class="sax-label">
						<label for="cbProfileSportOfficiating"><span>@Localiser["label.officiating"]</span></label>
					</div>
				</div>
				<div class="col-sm">
					<div class="sax-control">
						@Html.DropDownListFor(model => model.ProfileSportOfficiatingCode, Model.SportOfficiatingCodesForSelect, "", new { @id = "cbProfileSportOfficiating", @class = "ProfileSportOfficiating sax-select" })
					</div>
					<div class="sax-message"></div>
				</div>
			</div>
		</div>

	}

	<div class="spacer"></div>
</div>