{{#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}}

		{{#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}}
	{{/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}}
{{/if}}

{{#unless hasPages}}
	{{#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}}
{{/unless}}

	<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" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
							<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="font-weight-bold">{{block.title}}?</span></p>
							{{/dropdown-dialog}}
						</li>
					{{/each}}
				</ul>
			{{else}}
				<div class="template-caption">Reusable content appears below</div>
			{{/if}}
		</div>
	</div>

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