@model Model_Journalist
@inject SaxLocaliser Localiser
@{
	/* Articles - Article dialog panel */
}

<script type="text/javascript">
	sax.dlg.title.createArticle = '@Localiser.GetJavascriptText("journalist.caption.article.create")';
	sax.dlg.title.updateArticle = '@Localiser.GetJavascriptText("journalist.caption.article.update")';
	sax.dlg.title.selectRegion = '@Localiser.GetJavascriptText("reference.caption.region.select")';
	sax.dlg.title.selectSport = '@Localiser.GetJavascriptText("reference.caption.sport.select")';
</script>
@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmArticleId", @class = "sax-form" }))
{
	@Html.HiddenFor(model => model.ArticleId, new { @class = "ArticleId" })
}
<div id="dlgArticle" class="sax-dialog" title="">

	@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmArticle", @class = "sax-form", @onSubmit = "return false;" }))
	{
		@Html.HiddenFor(model => model.ArticleId, new { @id = "ifArticleId", @class = "ArticleId" })
		@Html.HiddenFor(model => model.ArticleExists, new { @id = "ifArticleExists", @class = "ArticleExists" })

		<div class="sax-article ArticleHeader">

			<div class="sax-article-panel sax-article-header">

				@* Article headline *@
				<div class="sax-form-control ArticleHeadline">
					<div class="sax-label">
						<label for="ifArticleHeadline"><span><span class="required">*</span> @Localiser["label.headline"]</span></label>
					</div>
					<div class="sax-control">
						@Html.TextBoxFor(model => model.ArticleHeadline, new { @id = "ifArticleHeadline", @class = "ArticleHeadline sax-input", @maxlength = @Model.GetControlMaxLength(SaxDbDfn_Core.ColumnIdx.JournalistArticle_Headline) })
					</div>
					<div class="sax-message"></div>
				</div>

				@* Article summary *@
				<div class="sax-form-control ArticleSummary">
					<div class="sax-label">
						<label for="ifArticleSummary"><span><span class="required">*</span> @Localiser["label.summary"]</span></label>
					</div>
					<div class="sax-control">
						@Html.TextAreaFor(model => model.ArticleSummary, new { @id = "ifArticleSummary", @class = "ArticleSummary sax-textarea", @rows = 6, @maxlength = @Model.GetControlMaxLength(SaxDbDfn_Core.ColumnIdx.JournalistArticle_Summary) })
					</div>
					<div class="sax-message"></div>
				</div>

				@* Sport *@
				<div class="sax-form-control ArticleSportId">
					<div class="sax-label">
						<label for="ifArticleSportId"><span><span class="required">*</span> @Localiser["label.sport"]</span></label>
					</div>
					<div class="sax-control row">
						@Html.HiddenFor(model => model.ArticleSportId, new { @id = "ifArticleSportId", @class = "ArticleSportId" })
						<div class="col">@Html.TextBoxFor(model => model.ArticleSportCaption, new { @id = "ifArticleSportCaption", @class = "ArticleSportCaption sax-input", @readonly = "readonly", @onDblClick = "sax.selectSport()" }) </div>
						<div class="fixed"><button id="pbSelectSport" class="sax-button" style="min-width:auto;margin-left:4px;padding:4px 6px" onclick="sax.selectSport()">@Localiser["label.select"]</button></div>
					</div>
					<div class="sax-message"></div>
				</div>

				@* Region *@
				<div class="sax-form-control ArticleRegionId">
					<div class="sax-label">
						<label for="ifArticleRegionId"><span><span class="required">*</span> @Localiser["label.region"]</span></label>
					</div>
					<div class="sax-control row">
						@Html.HiddenFor(model => model.ArticleRegionId, new { @id = "ifArticleRegionId", @class = "ArticleRegionId" })
						<div class="col">@Html.TextBoxFor(model => model.ArticleRegionCaption, new { @id = "ifArticleRegionCaption", @class = "ArticleRegionCaption sax-input", @readonly = "readonly", @onDblClick = "sax.selectRegion()" }) </div>
						<div class="fixed"><button id="pbSelectRegion" class="sax-button" style="min-width:auto;margin-left:4px;padding:4px 6px" onclick="sax.selectRegion()">@Localiser["label.select"]</button></div>
					</div>
					<div class="sax-message"></div>
				</div>

				@* Publication *@
			<div class="sax-form-control ArticlePublication">
				<div class="sax-label">
					<label for="ifArticleRegionId"><span>@Localiser["label.publication"]</span></label>
				</div>
				<div class="sax-control">
					<div class="row ArticlePublish">
						<div class="fixed"><div class="pl16 pt4 pr8">@Html.CheckBoxFor(model => model.ArticlePublish, new { @id = "chkArticlePublish", @class = "ArticlePublish" })&nbsp;<span class="" onclick="$('#chkArticlePublish').click()">@Localiser["label.publish"]</span></div></div>
						<div class="col">@Html.TextBoxFor(model => model.ArticlePublishOn, new { @id = "ifArticlePublishOn", @class = "sax-input sax-calendar ArticlePublishOn", @readonly = "readonly" })</div>
					</div>
					<div class="row ArticlePublished">
						<div class="col"><div class="pl16">@Localiser["label.published"]: <span class="ArticlePublishedOn"></span></div></div>
					</div>
				</div>
				<div class="sax-message"></div>
			</div>

			</div>

			<div class="sax-article-panel sax-article-content">

				<div class="sax-article-segment-list">
				</div>

				<div class="sax-panel-item-template">
					<div class="sax-panel-item ArticleSegment">
						@* Inputs with same name for every segment to ensure they are uploaded as a list. *@
						<input type="hidden" name="ArticleContentSegmentBodies" class="ArticleContentSegmentBody" value="" />
						<input type="hidden" name="ArticleContentSegmentItemImageIds" class="ArticleContentSegmentItemImageId" value="" />
						<input type="hidden" name="ArticleContentSegmentImageIdxs" class="ArticleContentSegmentImageIdx" value="" />
						@* Image drop panel *@
						<div class="sax-panel-file-drop row">
							<div class="col">Drop image here</div>
							<div class="fixed">
								<img id="" class="ContactImageUploadProgress" src="~/img/animated/progress-basketball-32.gif" style="display:none;margin:8px 4px;" />
							</div>
						</div>
						@* Segment details *@
						<div class="row">
							@* Segment body *@
							<div class="col">
								<div class="sax-article-segment-body"></div>
								<div class="sax-article-segment-image hidden"><img src="" alt="" title="" /></div>
							</div>
							<div class="fixed sax-actions">
								@* Segment actions *@
								<div class="sax-action sax-add"><img src="~/img/action/add24.png" alt="" title="" /></div>
								<div class="sax-action sax-add-image"><img src="~/img/action/image-add-24.png" alt="" title="" /></div>
								<div class="sax-action sax-up"><img src="~/img/action/upload24.png" alt="" title="" /></div>
								<div class="sax-action sax-down"><img src="~/img/action/download24.png" alt="" title="" /></div>
								<div class="sax-action sax-delete"><img src="~/img/action/delete24.png" alt="" title="" /></div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

	}

	<div id="dlgSelectArticleImage" class="sax-dialog">
		@using (@Html.BeginForm(FormMethod.Post, new { @id = "frmSelectArticleImage", @class = "sax-form", @onSubmit = "return false;" }))
		{
			<input type="hidden" id="" class="SegmentIdx" />
			<div class="spacer4"></div>
			<div class="sax-form-control ArticleImage">
				<div class="row">
					<div class="fixed"><div style="padding:0 12px;">@Localiser["label.image"]</div></div>
					<div class="col"><input type="file" id="ifArticleImage" name="" class="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="ArticleImageUploadProgress" src="~/img/animated/progress-basketball-32.gif" style="display:none;margin:8px 4px;" /></div>
			</div>
			<div class="spacer2"></div>
		}
	</div>

	<script type="text/javascript">
		sax.dlg.title.imageUpload = '@Localiser.GetJavascriptText("account.caption.image.upload")';
		sax.msg.uploadFileSelect = '@Localiser.GetJavascriptText("msg.upload.file.select")';
		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}")';
	</script>
	<partial name="~/Views/Common/SelectRegion.cshtml" />
	<partial name="~/Views/Common/SelectSport.cshtml" />

</div>