{{document/document-attachments document=document permissions=permissions}}

<div class="document-view {{if (is-equal document.layout 'doc') 'document-view-unified'}}">

	{{#if hasPages}}
		{{#each pages key="id" as |page index|}}
			{{#if permissions.documentEdit}}
				<div class="start-section" data-index={{index}} data-before-id={{page.id}} id="add-section-button-{{page.id}}" {{action 'onShowSectionWizard' page}}>
					<div class="start-button">
						<div class="round-button round-button-small button-green">
							<i class="material-icons">add</i>
						</div>
						<div class="label">section</div>
					</div>
				</div>
			{{else}}
				<div class="section-divider" />
			{{/if}}
			{{#if (is-equal page.pageType 'section')}}
				{{#document/document-page document=document folder=folder page=page permissions=permissions toEdit=toEdit pageId=pageId
					onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
					onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
				{{/document/document-page}}
			{{/if}}
			{{#if (is-equal page.pageType 'tab')}}
				{{#document/document-tab document=document folder=folder page=page permissions=permissions pageId=pageId
					onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
					onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage')}}
				{{/document/document-tab}}
			{{/if}}
		{{/each}}
		{{#if permissions.documentEdit}}
			<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
				<div class="start-button">
					<div class="round-button round-button-small button-green">
						<i class="material-icons">add</i>
					</div>
					<div class="label">section</div>
				</div>
			</div>
		{{/if}}
	{{else}}
		{{#if permissions.documentEdit}}
			<div class="start-section start-section-empty-state" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
				<div class="start-button">
					<div class="round-button round-button-small button-green">
						<i class="material-icons">add</i>
					</div>
					<div class="label">section</div>
				</div>
			</div>
		{{/if}}
	{{/if}}

	<div id="wizard-placeholder" class="hide margin-top-50" />

	<div id="new-section-wizard" class="new-section-wizard">
		<div class="input-inline input-transparent pull-left width-80">
			{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'section-name error-inline' 'section-name') placeholder="Name" autocomplete="off"}}
		</div>
		<div class="round-button-mono pull-right" {{action 'onHideSectionWizard'}}>
			<i class="material-icons color-gray">close</i>
		</div>
		<div class="clearfix" />

		<div class="list-wrapper">
			<ul class="preset-list">
				{{#each sections as |section|}}
					<li class="item" {{action 'onInsertSection' section}}>
						<div class="icon">
							<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
						</div>
						<div class='title'>{{section.title}}</div>
					</li>
				{{/each}}
			</ul>

			{{#if hasBlocks}}
				<div class="template-caption">Reusable content</div>
				<ul class="block-list">
					{{#each blocks as |block|}}
						<li class="item tooltipped" data-tooltip="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-tooltip-position="bottom center">
							<div class="block-actions">
								{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
									<i class="material-icons">mode_edit</i>
								{{/link-to}}
								<i class="material-icons" id={{block.deleteId}}>delete</i>
							</div>
							<div class="details" {{action 'onInsertBlock' block}}>
								<div class='title'>{{block.title}}</div>
								<div class='desc'>{{block.excerpt}}</div>
							</div>
							{{#dropdown-dialog target=block.deleteId position="bottom left" button="Delete" color="flat-red" onAction=(action 'onDeleteBlock' block.id)}}
								<p>Are you sure you want to delete block<br/><span class="bold">{{block.title}}?</span></p>
							{{/dropdown-dialog}}
						</li>
					{{/each}}
				</ul>
			{{else}}
				<div class="template-caption">Reusable content appears below</div>
			{{/if}}
		</div>
	</div>

</div>