Provide each doc section with TOC controls

Put up/down/indent/outdent options on the section menu dropdown for easier TOC manipulation.

gui/app/components/document/document-toc.js

@@ -63,7 +63,7 @@ export default Component.extend(TooltipMixin, {
 		this.removeTooltips();
 	},
 
-	onDocumentPageAdded(pageId) { // eslint-disable-line no-unused-vars
+	onDocumentPageAdded(pageId) {
 		schedule('afterRender', () => {
 			this.setState(pageId);
 		});

gui/app/components/document/page-heading.js

@@ -14,6 +14,7 @@ import { computed } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import ModalMixin from '../../mixins/modal';
+import tocUtil from '../../utils/toc';
 import Component from '@ember/component';
 
 export default Component.extend(ModalMixin, {
@@ -23,7 +24,7 @@ export default Component.extend(ModalMixin, {
 	deleteChildren: false,
 	blockTitle: "",
 	blockExcerpt: "",
-	canEdit: false,
+	// canEdit: false,
 	canDelete: false,
 	canMove: false,
 	docSearchFilter: '',
@@ -39,10 +40,29 @@ export default Component.extend(ModalMixin, {
 		return permissions.get('documentCopy') || permissions.get('documentTemplate') ||
 			this.get('canEdit') || this.get('canMove') || this.get('canDelete');
 	}),
+	canEdit: computed('permissions', 'document', 'pages', function() {
+		let constants = this.get('constants');
+		let permissions = this.get('permissions');
+		let authenticated = this.get('session.authenticated');
+		let notEmpty = this.get('pages.length') > 0;
+
+		if (notEmpty && authenticated && permissions.get('documentEdit') && this.get('document.protection') === constants.ProtectionType.None) return true;
+		if (notEmpty && authenticated && permissions.get('documentApprove') && this.get('document.protection') === constants.ProtectionType.Review) return true;
+
+		return false;
+	}),
 
 	init() {
 		this._super(...arguments);
 		this.docSearchResults = [];
+		this.state = {
+			actionablePage: false,
+			upDisabled: true,
+			downDisabled: true,
+			indentDisabled: true,
+			outdentDisabled: true,
+			pageId: ''
+		};
 	},
 
 	didReceiveAttrs() {
@@ -50,9 +70,11 @@ export default Component.extend(ModalMixin, {
 		this.modalInputFocus('#publish-page-modal-' + this.get('page.id'), '#block-title-' + this.get('page.id'));
 
 		let permissions = this.get('permissions');
-		this.set('canEdit', permissions.get('documentEdit'));
+		// this.set('canEdit', permissions.get('documentEdit'));
 		this.set('canDelete', permissions.get('documentDelete'));
 		this.set('canMove', permissions.get('documentMove'));
+
+		this.setState(this.get('page.id'));
 	},
 
 	searchDocs() {
@@ -64,6 +86,20 @@ export default Component.extend(ModalMixin, {
 		});
 	},
 
+	// Controls what user can do with the toc enty for this page
+	setState(pageId) {
+		let toc = this.get('pages');
+		let page = _.find(toc, function(i) { return i.get('page.id') === pageId; });
+		let state = tocUtil.getState(toc, page.get('page'));
+
+		if (!this.get('canEdit')) {
+			state.actionablePage = false;
+			state.upDisabled = state.downDisabled = state.indentDisabled = state.outdentDisabled = true;
+		}
+
+		this.set('state', state);
+	},
+
 	actions: {
 		onEdit() {
 			let page = this.get('page');
@@ -168,5 +204,72 @@ export default Component.extend(ModalMixin, {
 			let refresh = this.get('refresh');
 			refresh();
 		},
+
+		// Page up -- above pages shunt down
+		pageUp() {
+			let state = this.get('state');
+
+			if (state.upDisabled || this.get('document.protection') !== this.get('constants').ProtectionType.None) {
+				return;
+			}
+
+			let pages = this.get('pages');
+			let page = _.find(pages, function(i) { return i.get('page.id') === state.pageId; });
+			if (is.not.undefined(page)) page = page.get('page');
+
+			let pendingChanges = tocUtil.moveUp(state, pages, page);
+			if (pendingChanges.length > 0) {
+				let cb = this.get('onPageSequenceChange');
+				cb(state.pageId, pendingChanges);
+			}
+		},
+
+		// Move down -- pages below shift up
+		pageDown() {
+			if (!this.get('canEdit')) return;
+
+			let state = this.get('state');
+			let pages = this.get('pages');
+			let page = _.find(pages, function(i) { return i.get('page.id') === state.pageId; });
+			if (is.not.undefined(page)) page = page.get('page');
+
+			let pendingChanges = tocUtil.moveDown(state, pages, page);
+			if (pendingChanges.length > 0) {
+				let cb = this.get('onPageSequenceChange');
+				cb(state.pageId, pendingChanges);
+			}
+		},
+
+		// Indent -- changes a page from H2 to H3, etc.
+		pageIndent() {
+			if (!this.get('canEdit')) return;
+
+			let state = this.get('state');
+			let pages = this.get('pages');
+			let page = _.find(pages, function(i) { return i.get('page.id') === state.pageId; });
+			if (is.not.undefined(page)) page = page.get('page');
+
+			let pendingChanges = tocUtil.indent(state, pages, page);
+			if (pendingChanges.length > 0) {
+				let cb = this.get('onPageLevelChange');
+				cb(state.pageId, pendingChanges);
+			}
+		},
+
+		// Outdent -- changes a page from H3 to H2, etc.
+		pageOutdent() {
+			if (!this.get('canEdit')) return;
+
+			let state = this.get('state');
+			let pages = this.get('pages');
+			let page = _.find(pages, function(i) { return i.get('page.id') === state.pageId; });
+			if (is.not.undefined(page)) page = page.get('page');
+
+			let pendingChanges = tocUtil.outdent(state, pages, page);
+			if (pendingChanges.length > 0) {
+				let cb = this.get('onPageLevelChange');
+				cb(state.pageId, pendingChanges);
+			}
+		}
 	}
 });

gui/app/pods/document/index/controller.js

@@ -198,19 +198,25 @@ export default Controller.extend(Tooltips, Notifier, {
 		},
 
 		onPageSequenceChange(currentPageId, changes) {
+			this.showWait();
 			this.set('currentPageId', currentPageId);
+
 			this.get('documentService').changePageSequence(this.get('document.id'), changes).then(() => {
 				this.get('documentService').fetchPages(this.get('document.id'), this.get('session.user.id')).then( (pages) => {
 					this.set('pages', pages);
+					this.showDone();
 				});
 			});
 		},
 
 		onPageLevelChange(currentPageId, changes) {
+			this.showWait();
 			this.set('currentPageId', currentPageId);
+
 			this.get('documentService').changePageLevel(this.get('document.id'), changes).then(() => {
 				this.get('documentService').fetchPages(this.get('document.id'), this.get('session.user.id')).then( (pages) => {
 					this.set('pages', pages);
+					this.showDone();
 				});
 			});
 		},

gui/app/pods/document/index/template.hbs

@@ -16,17 +16,17 @@
 	{{#layout/middle-zone-content}}
 
 		{{toolbar/for-document
-			document=document
-			spaces=folders
-			space=folder
-			permissions=permissions
-			roles=roles
 			tab=tab
+			roles=roles
+			space=folder
+			spaces=folders
+			document=document
 			versions=versions
-			onDocumentDelete=(action 'onDocumentDelete')
+			permissions=permissions
+			refresh=(action 'refresh')
 			onSaveTemplate=(action 'onSaveTemplate')
 			onSaveDocument=(action 'onSaveDocument')
-			refresh=(action 'refresh')}}
+			onDocumentDelete=(action 'onDocumentDelete')}}
 
 		<div class="text-center non-printable document-tabnav">
 			<ul class="tabnav-control">
@@ -39,30 +39,50 @@
 
 		{{document/document-heading
 			document=document
-			permissions=permissions
 			versions=versions
+			permissions=permissions
 			onSaveDocument=(action 'onSaveDocument')}}
 
 		{{document/document-meta
-			document=document
+			pages=pages
 			folder=folder
 			folders=folders
-			permissions=permissions
+			document=document
-			pages=pages
 			versions=versions
+			permissions=permissions
 			onSaveDocument=(action 'onSaveDocument')}}
 
 		{{#if (eq tab 'content')}}
 			{{document/view-content
-				document=document links=links pages=pages blocks=blocks currentPageId=currentPageId
+				roles=roles
-				folder=folder folders=folders sections=sections permissions=permissions roles=roles
+				links=links
-				onSavePage=(action 'onSavePage') onInsertSection=(action 'onInsertSection')
+				pages=pages
-				onSavePageAsBlock=(action 'onSavePageAsBlock') onDeleteBlock=(action 'onDeleteBlock')
+				blocks=blocks
-				onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onPageDeleted')
+				folder=folder
-				refresh=(action 'refresh')}}
+				folders=folders
+				sections=sections
+				document=document
+				permissions=permissions
+				currentPageId=currentPageId
+				refresh=(action 'refresh')
+				onSavePage=(action 'onSavePage')
+				onCopyPage=(action 'onCopyPage')
+				onMovePage=(action 'onMovePage')
+				onDeletePage=(action 'onPageDeleted')
+				onDeleteBlock=(action 'onDeleteBlock')
+				onInsertSection=(action 'onInsertSection')
+				onSavePageAsBlock=(action 'onSavePageAsBlock')
+				onPageLevelChange=(action 'onPageLevelChange')
+				onPageSequenceChange=(action 'onPageSequenceChange')}}
 		{{/if}}
+
 		{{#if (eq tab 'revision')}}
-			{{document/view-revision document=document folder=folder pages=pages permissions=permissions onRollback=(action 'onRollback')}}
+			{{document/view-revision
+				pages=pages
+				folder=folder
+				document=document
+				permissions=permissions
+				onRollback=(action 'onRollback')}}
 		{{/if}}
 
 	{{/layout/middle-zone-content}}
@@ -70,17 +90,17 @@
 	{{#layout/middle-zone-sidebar}}
 
 		{{document/document-toc
-			document=document
-			folder=folder
-			pages=pages
-			page=page
-			permissions=permissions
-			roles=roles
 			tab=tab
+			page=page
+			roles=roles
+			pages=pages
+			folder=folder
+			document=document
+			permissions=permissions
 			currentPageId=currentPageId
 			onShowPage=(action 'onShowPage')
-			onPageSequenceChange=(action 'onPageSequenceChange')
+			onPageLevelChange=(action 'onPageLevelChange')
-			onPageLevelChange=(action 'onPageLevelChange')}}
+			onPageSequenceChange=(action 'onPageSequenceChange')}}
 
 	{{/layout/middle-zone-sidebar}}
 

gui/app/styles/view/document/doc-structure.scss

@@ -67,7 +67,3 @@
 		}
 	}
 }
-
-.section-divider {
-	margin-top: 70px;
-}

gui/app/templates/components/document/document-page.hbs

@@ -1,14 +1,43 @@
 <div id="page-{{page.id}}" data-id="{{page.id}}" data-type="{{page.contentType}}">
+
 	{{#if editMode}}
+
 		<div class="wysiwyg">
-			{{document/document-editor document=document folder=folder page=editPage meta=editMeta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
+			{{document/document-editor
+				document=document
+				folder=folder
+				page=editPage
+				meta=editMeta
+				onCancel=(action 'onCancelEdit')
+				onAction=(action 'onSavePage')}}
 		</div>
+
 	{{else}}
-		{{document/page-heading document=document folder=folder page=page meta=meta pending=pending permissions=permissions tabMode=tabMode roles=roles blocks=blocks
+
-			onEdit=(action 'onEdit') onSavePageAsBlock=(action 'onSavePageAsBlock')
+		{{document/page-heading
-			onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}}
+			page=page
+			meta=meta
+			pages=pages
+			roles=roles
+			folder=folder
+			blocks=blocks
+			tabMode=tabMode
+			pending=pending
+			document=document
+			permissions=permissions
+			onEdit=(action 'onEdit')
+			refresh=(action refresh)
+			onCopyPage=(action 'onCopyPage')
+			onMovePage=(action 'onMovePage')
+			onDeletePage=(action 'onDeletePage')
+			onSavePageAsBlock=(action 'onSavePageAsBlock')
+			onPageLevelChange=(action onPageLevelChange)
+			onPageSequenceChange=(action onPageSequenceChange)}}
+
 		<div class="wysiwyg">
 			{{section/base-renderer page=page}}
 		</div>
+
 	{{/if}}
+
 </div>

gui/app/templates/components/document/document-toc.hbs

@@ -4,7 +4,7 @@
 		<i class="material-icons" title="Table of contents" data-toggle="tooltip" data-placement="top">reorder</i>
 	</div>
 
-	<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
+	<div id="doc-toc" class="document-toc">
 		<div class="header">
 			{{#if canEdit}}
 				<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">

gui/app/templates/components/document/page-heading.hbs

@@ -38,6 +38,21 @@
 								{{#if canDelete}}
 									<a class="dropdown-item text-danger" href="#" id={{concat 'delete-page-button-' page.id}} data-toggle="modal" data-target={{concat '#delete-page-modal-' page.id}} data-backdrop="static">Delete</a>
 								{{/if}}
+								{{#if (and canEdit state.actionablePage)}}
+									<div class="dropdown-divider"></div>
+									{{#unless state.indentDisabled}}
+										<a class="dropdown-item" href="#" id={{concat 'toc-indent-button-' page.id}} {{action 'pageIndent'}}>Indent</a>
+									{{/unless}}
+									{{#unless state.outdentDisabled}}
+										<a class="dropdown-item" href="#" id={{concat 'toc-outdent-button-' page.id}} {{action 'pageOutdent'}}>Outdent</a>
+									{{/unless}}
+									{{#unless state.upDisabled}}
+										<a class="dropdown-item" href="#" id={{concat 'toc-up-button-' page.id}} {{action 'pageUp'}}>Move up</a>
+									{{/unless}}
+									{{#unless state.downDisabled}}
+										<a class="dropdown-item" href="#" id={{concat 'toc-down-button-' page.id}} {{action 'pageDown'}}>Move down</a>
+									{{/unless}}
+								{{/if}}
 							</div>
 						{{/if}}
 					</div>

gui/app/templates/components/document/view-content.hbs

@@ -1,125 +1,151 @@
 {{#if hasPages}}
-{{#each pages key="id" as |item index|}}
+
+	{{#each pages key="id" as |item index|}}
+		{{#if canEdit}}
+			<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}"
+			{{action 'onShowSectionWizard' item.page}}>
+				<div class="start-button">
+					<div class="cta">+ SECTION</div>
+				</div>
+			</div>
+		{{else}}
+			<div class="margin-top-70" />
+		{{/if}}
+		{{document/document-page
+			roles=roles
+			pages=pages
+			folder=folder
+			toEdit=toEdit
+			blocks=blocks
+			page=item.page
+			meta=item.meta
+			document=document
+			pending=item.pending
+			permissions=permissions
+			refresh=(action refresh)
+			onSavePage=(action 'onSavePage')
+			onCopyPage=(action 'onCopyPage')
+			onMovePage=(action 'onMovePage')
+			onDeletePage=(action 'onDeletePage')
+			onSavePageAsBlock=(action 'onSavePageAsBlock')
+			onPageLevelChange=(action onPageLevelChange)
+			onPageSequenceChange=(action onPageSequenceChange)}}
+	{{/each}}
+
 	{{#if canEdit}}
-		<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}"
+		<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
-		{{action 'onShowSectionWizard' item.page}}>
 			<div class="start-button">
 				<div class="cta">+ SECTION</div>
 			</div>
 		</div>
-	{{else}}
-<div class="section-divider" /> {{/if}} {{document/document-page document=document folder=folder page=item.page meta=item.meta pending=item.pending permissions=permissions
-toEdit=toEdit roles=roles blocks=blocks onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action
-'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}} {{/each}}
-{{#if canEdit}}
-<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
-	<div class="start-button">
-		<div class="cta">+ SECTION</div>
-	</div>
-</div>
-{{/if}}
-{{#if showLikes}}
-	<div class=" d-flex justify-content-center">
-		<div class="vote-box">
-			{{#unless voteThanks}}
-			<div class="prompt">
-				{{folder.likes}}
-			</div>
-			<div class="buttons">
-				<button type="button" class="btn btn-outline-success font-weight-bold" {{action 'onVote' 1}}>Yes, thanks!</button>&nbsp;&nbsp;
-				<button type="button" class="btn btn-outline-secondary font-weight-bold" {{action 'onVote' 2}}>Not really</button>
-			</div>
-			{{else}}
-			<div class="ack">Thanks for the feedback!</div>
-			{{/unless}}
-		</div>
-	</div>
-
 	{{/if}}
+
+	{{#if showLikes}}
+		<div class=" d-flex justify-content-center">
+			<div class="vote-box">
+				{{#unless voteThanks}}
+				<div class="prompt">
+					{{folder.likes}}
+				</div>
+				<div class="buttons">
+					<button type="button" class="btn btn-outline-success font-weight-bold" {{action 'onVote' 1}}>Yes, thanks!</button>&nbsp;&nbsp;
+					<button type="button" class="btn btn-outline-secondary font-weight-bold" {{action 'onVote' 2}}>Not really</button>
+				</div>
+				{{else}}
+				<div class="ack">Thanks for the feedback!</div>
+				{{/unless}}
+			</div>
+		</div>
+	{{/if}}
+
 {{/if}}
 
 {{#unless hasPages}}
 	{{#if canEdit}}
-<div class="start-section" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
+		<div class="start-section" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
-	<div class="start-button">
+			<div class="start-button">
-		<div class="cta">+ SECTION</div>
+				<div class="cta">+ SECTION</div>
-	</div>
+			</div>
-</div>
+		</div>
-{{/if}} {{/unless}}
+	{{/if}}
+{{/unless}}
 
 {{#if canEdit}}
-<div id="wizard-placeholder" class="hide margin-top-50" />
+	<div id="wizard-placeholder" class="hide margin-top-50" />
-<div id="new-section-wizard" class="new-section-wizard">
+	<div id="new-section-wizard" class="new-section-wizard">
-	<div class="container box">
+		<div class="container box">
-		<div class="row clearfix">
+			<div class="row clearfix">
-			<div class="col-12 clearfix">
+				<div class="col-12 clearfix">
-				<div class="float-right mb-5">
+					<div class="float-right mb-5">
-					<button type="button" class="btn btn-secondary" {{action 'onHideSectionWizard'}}>Close</button>
+						<button type="button" class="btn btn-secondary" {{action 'onHideSectionWizard'}}>Close</button>
+					</div>
 				</div>
 			</div>
-		</div>
+			<div class="row">
-		<div class="row">
+				<div class="col-12">
-			<div class="col-12">
+					<div class="form-group">
-				<div class="form-group">
+						{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg
-					{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg
+						is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
-					is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
+					</div>
 				</div>
 			</div>
-		</div>
 
-		<div class="row">
+			<div class="row">
-			<div class="col-12">
+				<div class="col-12">
-				<div class="form-group">
+					<div class="form-group">
-					<div class="new-section-caption">Insert section type</div>
+						<div class="new-section-caption">Insert section type</div>
-					<ul class="preset-list">
+						<ul class="preset-list">
-						{{#each sections as |section|}}
+							{{#each sections as |section|}}
-						<li class="item" {{action 'onInsertSection' section}}>
+							<li class="item" {{action 'onInsertSection' section}}>
-							<div class="icon">
+								<div class="icon">
-								<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
+									<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
+								</div>
+								<div class='title'>{{section.title}}</div>
+							</li>
+							{{/each}}
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<div class="row">
+				<div class="col-12">
+					{{#if hasBlocks}}
+					<div class="new-section-caption">Insert re-usable 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="actions">
+								{{#if permissions.documentTemplate}} {{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id
+								class="button-icon-gray button-icon-small align-middle"}}
+								<i class="material-icons">edit</i>
+								{{/link-to}}
+								<div class="button-icon-gap" />
+								<div id={{concat 'delete-block-button-' block.id}} class="button-icon-danger button-icon-small align-middle" {{action
+								'onShowDeleteBlockModal' block.id}}>
+									<i class="material-icons">delete</i>
+								</div>
+								{{/if}}
+							</div>
+							<div class="details" {{action 'onInsertBlock' block}}>
+								<div class="title text-truncate">{{block.title}}</div>
+								<div class="desc text-truncate">{{block.excerpt}}</div>
 							</div>
-							<div class='title'>{{section.title}}</div>
 						</li>
 						{{/each}}
 					</ul>
+					{{else}}
+					<div class="template-caption">You have no reusable content &mdash; publish any section as a template</div>
+					{{/if}}
 				</div>
 			</div>
 		</div>
-
-		<div class="row">
-			<div class="col-12">
-				{{#if hasBlocks}}
-				<div class="new-section-caption">Insert re-usable 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="actions">
-							{{#if permissions.documentTemplate}} {{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id
-							class="button-icon-gray button-icon-small align-middle"}}
-							<i class="material-icons">edit</i>
-							{{/link-to}}
-							<div class="button-icon-gap" />
-							<div id={{concat 'delete-block-button-' block.id}} class="button-icon-danger button-icon-small align-middle" {{action
-							 'onShowDeleteBlockModal' block.id}}>
-								<i class="material-icons">delete</i>
-							</div>
-							{{/if}}
-						</div>
-						<div class="details" {{action 'onInsertBlock' block}}>
-							<div class="title text-truncate">{{block.title}}</div>
-							<div class="desc text-truncate">{{block.excerpt}}</div>
-						</div>
-					</li>
-					{{/each}}
-				</ul>
-				{{else}}
-				<div class="template-caption">You have no reusable content &mdash; publish any section as a template</div>
-				{{/if}}
-			</div>
-		</div>
 	</div>
-</div>
+{{/if}}
-{{/if}} {{#if permissions.documentTemplate}} {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger"
+
-show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
+{{#if permissions.documentTemplate}}
-<p>Are you sure you want to delete this re-usable content block?</p>
+	{{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
-{{/ui/ui-dialog}} {{/if}}
+		<p>Are you sure you want to delete this re-usable content block?</p>
+	{{/ui/ui-dialog}}
+{{/if}}