@* Organisation controls - Contact *@
@model SaxModel_Online
@inject SaxLocaliser Localiser
@* NB Organisation contact controls may be present more than once on a page, eg. Profile Organisation. *@

@if (!Model.RegisterView("Views/Common/OrganisationControls-Contact")) return;

<style>
	.OrganisationContactMethods .ContactMethods
	{
		min-height: 32px;
		max-height: 64px;
		background-color: #fff;
		border: 1px solid #808080;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		overflow-y: scroll;
	}

	.OrganisationContactMethods .ContactMethods table.sax-data tr:hover
	{
		background-color: #f0f0f0;
	}

	.OrganisationContactMethods .ContactMethods table.sax-data .sax-label
	{
		margin: 0;
		padding: 0 8px 0 0;
	}
</style>

@* Organisation Contact Methods *@
<div class="sax-form-control OrganisationContactMethods">
	<input type="hidden" name="Organisation.ContactMethods" value="0" />
	<div class="row">
		<div class="col-sm-3 row">
			<div class="col">
				<div class="sax-label">
					<label for=""><span>@Localiser["label.contact"]</span></label>
				</div>
			</div>
			<div class="fixed">
				@* Action to add new contact method. *@
				<div class="sax-actions">
					<div class="sax-action sax-add pr4"><img src="~/img/action/add24.png" alt="@(Localiser["label.add"])" title="@(Localiser["label.add"])" /></div>
				</div>
			</div>
		</div>
		<div class="col-sm">
			<div class="sax-control row">
				<div class="col">
					@* List of existing contact methods with actions to edit/remove. *@
					<div class="ContactMethods">
						<table class="sax-data fullwidth"></table>
					</div>
					<table class="sax-panel-item-template">
						<tr class="ContactMethod">
							<td style="width:20px;"><div class="sax-label nowrap"></div></td>
							<td class="sax-value " style="width:70%;word-break: break-all;"></td>
							<td class="sax-actions right nowrap" style="min-width:10px;">
								<input type="hidden" name="Organisation.ContactMethod" />
								<input type="hidden" name="Organisation.ContactValue" />
								<div class="nowrap">
									<div class="inlineb sax-action sax-edit"><img src="~/img/action/edit16.png" alt="@(Localiser["label.edit"])" title="@(Localiser["label.edit"])" /></div>
									<div class="inlineb sax-action sax-remove"><img src="~/img/action/delete16.png" alt="@(Localiser["label.remove"])" title="@(Localiser["label.remove"])" /></div>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="sax-message"></div>
		</div>
	</div>
</div>

<partial name="~/Views/Common/ContactMethods.cshtml" />