@model Model_Organisation
@inject SaxLocaliser Localiser
@{
	/* Organisations - Organisation images dialog panel */
	// Ensure view is only included once in page.
	if (!Model.RegisterView("Views/Organisation/Panel-Organisation-Images")) return;
	// Scripts.
	Model.AdditionalFiles_JS.Add("js/sax-org-img.js");
}

<style>
	#dlgOrganisationImages .sax-panel-drop.OrganisationLogoImageDrop
	{
		padding: 4px 8px;
		border: 1px solid #808080;
		border-radius: 4px;
	}

	#dlgOrganisationImages .sax-panel-drop.OrganisationLogoImageDrop img
	{
		display: none;
		max-width:@(Sax.Config.Organisation.Logo.DisplayWidthMax_Item + "px");
		max-height:@(Sax.Config.Organisation.Logo.DisplayHeightMax_Item + "px");
		margin-right: 8px;
		border: 1px solid #b0b0b080;
		border-radius: 4px;
	}

	#dlgOrganisationImages .sax-panel-drop.OrganisationLogoImageDrop *
	{
		/*pointer-events: none;*/
	}

	#dlgOrganisationImages .sax-panel-drop.OrganisationLogoImageDrop.sax-file-drag
	{
		background-color:#c0fff0;
		border-color: darkgreen;
	}
</style>
<script type="text/javascript">
	sax.msg.uploadImageSingle = '@Localiser.GetJavascriptText("msg.upload.image.single")';
	sax.msg.uploadFileSizeMax = '@Localiser.GetJavascriptText("msg.upload.file.size.max","{0}")';
	sax.msg.uploadFileTypeInvalid = '@Localiser.GetJavascriptText("msg.upload.file.type.invalid","{0}")';
	sax.msg.uploadingFile = '@Localiser.GetJavascriptText("msg.upload.file.uploading","{0}")';
	sax.dlg.title.imageUpload = '@Localiser.GetJavascriptText("caption.image.upload")';
	sax.msg.uploadFileSelect = '@Localiser.GetJavascriptText("msg.upload.file.select")';
</script>

<div id="dlgOrganisationImages" class="sax-dialog" title="@Localiser["caption.organisation.images"]">
	<div class="spacer"></div>

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

		@* Organisation name *@
		<div class="sax-form-control OrganisationName">
			<div class="row">
				<div class="col-sm-3">
					<div class="sax-label">
						<label for="ifOrganisationName"><span>@Localiser["label.organisation"]</span></label>
					</div>
				</div>
				<div class="col-sm">
					<div class="sax-control">
						<input type="text" id="ifOrganisationName" class="OrganisationName sax-input" maxlength="@Model.GetControlMaxLength(SaxDbDfn_Core.ColumnIdx.Organisation_Name)" disabled="disabled" />
					</div>
					<div class="sax-message"></div>
				</div>
			</div>
		</div>

		@* Organisation Logo *@
		<div class="sax-form-control OrganisationLogoImage">
			<div class="row">
				<div class="col-sm-3">
					<div class="sax-label">
						<label><span>@Localiser["label.logo"]</span></label>
					</div>
				</div>
				<div class="col-sm">
					<div class="sax-control">
						<div class="OrganisationLogoImageDrop sax-panel-drop row">
							<div class="fixed">
								<div class=""><img src="" class="sax-contact-image OrganisationLogo" alt="" title="" /></div>
							</div>
							<div class="col">
								@Localiser["msg.drag.image.here"]
								<div class="DropMessage"></div>
								<div class="UploadMessage"></div>
								<div class="spacer4"></div>
								@Localiser["label.alternatively"]:&nbsp;
								<button class="SelectOrgLogoImage sax-button" style="min-width:auto;margin-left:4px;padding:4px 6px;z-index:999;">@Localiser["label.upload"]</button>
							</div>
							<div class="fixed">
								<img id="" class="ImageUploadProgress" src="~/img/animated/progress-basketball-32.gif" style="display:none;margin:8px 4px;" />
							</div>
						</div>
					</div>
					<div class="sax-message"></div>
				</div>
			</div>
		</div>

	}

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

<div id="dlgSelectOrgLogoImage" class="sax-dialog" title="@Localiser.GetJavascriptText("caption.image.upload")">
	@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmSelectOrgLogoImage", @class = "sax-form", @onSubmit = "return false;" }))
	{
		<div class="spacer4"></div>
		<div class="sax-form-control AccountOrgLogoImage">
			<div class="row">
				<div class="fixed"><div style="padding:0 12px;">@Localiser["label.image"]</div></div>
				<div class="col"><input type="file" name="" class="OrganisationLogoImage fullwidth" style="" /></div>
			</div>
			<div class="sax-message"></div>
		</div>
		<div class="spacer2"></div>
		<div class="row">
			<div class="col"><div class="UploadMessage"></div></div>
			<div class="fixed"><img id="" class="ImageUploadProgress" src="~/img/animated/progress-basketball-32.gif" style="display:none;margin:8px 4px;" /></div>
		</div>
		<div class="spacer2"></div>
	}
</div>