<div id="section-editor-{{pageId}}">
	<div class="grid-container-8-2">
		<div class="grid-cell-1 grid-cell-width-100">
			<div class="section-editor">
				<form>
					{{#if blockMode}}
						<div class="form-group">
							{{focus-input id="page-id-{{pageId}}" value=pageTitle placeholder="Enter name"
								class=(if hasNameError "form-control mousetrap form-control-lg is-invalid" "form-control form-control-lg mousetrap")}}
						</div>
						<div class="form-group">
							{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt rows="2" class=(if hasDescError "form-control mousetrap form-control-lg is-invalid" "form-control form-control-lg mousetrap") placeholder="Enter description"}}
						</div>
					{{else}}
						<div class="form-group">
							{{focus-input type="text" id=pageId value=pageTitle class=(if hasNameError "form-control mousetrap form-control-lg is-invalid" "form-control form-control-lg mousetrap") placeholder="Enter name"}}
						</div>
					{{/if}}
				</form>
			</div>
		</div>
		<div class="grid-cell-2 grid-cell-right">
			{{#if busy}}
				<img src="/assets/img/busy-gray.gif" class="busy-indicator">
			{{/if}}
			{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
				{{#if contentLinkerButton}}
					{{ui/ui-toolbar-icon icon=constants.Icon.Link color=constants.Color.Gray
						tooltip="Insert Link" onClick=(action "onShowLinkModal")}}
				{{/if}}
				{{#if previewButton}}
					{{ui/ui-toolbar-icon icon=constants.Icon.Preview color=constants.Color.Gray
						tooltip="Preview changes" onClick=(action "onPreview")}}
				{{/if}}
				{{ui/ui-toolbar-icon icon=constants.Icon.Tick color=constants.Color.Green tooltip="Save changes" onClick=(action "onAction")}}
				{{ui/ui-toolbar-icon icon=constants.Icon.Cross color=constants.Color.Red tooltip="Cancel editing" onClick=(action "onCancel")}}
			{{/ui/ui-toolbar}}
		</div>
	</div>
	<div class="section-editor">
		<div class="canvas">
			{{yield}}
		</div>
	</div>
</div>

<div id={{concat "discard-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Discard Changes</div>
			<div class="modal-body">
				<p>You have made changes to the section - continue editing or discard changes?</p>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label="Continue editing" dismiss=true}}
				{{ui/ui-button color=constants.Color.Red light=true label="Discard changes" onClick=(action "onDiscard")}}
			</div>
		</div>
	</div>
</div>

{{document/content-linker document=document folder=folder page=page showModal=showLinkModal onInsertLink=(action "onInsertLink")}}
