{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
	{{#if (or hasDocuments pinState.isPinned session.authenticated)}}
		{{#ui/ui-toolbar-dropdown label=(localize 'content') arrow=true}}
			{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
				<div class="menu" role="menu">
					{{#if pinState.isPinned}}
						<li class="item" {{action "onUnpin"}} role="button" tabindex="0">{{localize 'bookmark_remove'}}</li>
					{{else if session.authenticated}}
						<li class="item" {{action "onPin"}} role="button" tabindex="0">{{localize 'bookmark'}}</li>
					{{/if}}
					{{#if hasDocuments}}
						<li class="item" {{action "onShowExport"}} role="button" tabindex="0">{{localize 'download'}}</li>
					{{/if}}
				</div>
			{{/attach-popover}}
		{{/ui/ui-toolbar-dropdown}}
	{{/if}}

	{{#if permissions.documentAdd}}
		{{#ui/ui-toolbar-dropdown label=(localize 'new') arrow=true}}
			{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
				<div class="menu" role="menu">
					<li class="item" {{action "onShowEmptyDocModal"}} role="button" tabindex="0">{{localize 'new_canvas'}}</li>
					{{#if hasTemplates}}
						<li class="item" {{action "onShowTemplateDocModal"}} role="button" tabindex="0">{{localize 'new_template'}}</li>
					{{/if}}
					<li class="item" {{action "onShowImportDocModal"}} role="button" tabindex="0">{{localize 'new_import'}}</li>
				</div>
			{{/attach-popover}}
		{{/ui/ui-toolbar-dropdown}}
	{{/if}}

	{{#if (or permissions.spaceOwner permissions.spaceManage)}}
		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green tooltip=(localize 'settings') linkTo="folder.settings"}}
	{{/if}}
{{/ui/ui-toolbar}}

<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'new_canvas'}}</div>
			<div class="modal-body">
				<form onsubmit={{action "onAddEmptyDoc"}} role="form">
					<div class="form-group">
						<label for="empty-doc-name">{{localize 'name'}}</label>
						{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
					</div>
				</form>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'cancel') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=(localize 'add') onClick=(action "onAddEmptyDoc")}}
			</div>
		</div>
	</div>
</div>
<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'new_template'}}</div>
			<div class="modal-body">
				<form onsubmit={{action "onAddTemplateDoc"}} role="form">
					<div class="form-group">
						<label for="template-doc-name">{{localize 'name'}}</label>
						{{input id="template-doc-name" type="text" value=templateDocName placeholder="" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
					</div>
					<div class="widget-list-picker">
						<ul class="options">
							{{#each templates as |item|}}
								<li class="option {{if item.selected "selected"}}" {{action "onSelectTemplate" item}}>
									<div class="text text-truncate">
										{{item.name}}<br>{{item.excerpt}}
									</div>
									{{#if item.selected}}
										<i class="dicon {{constants.Icon.Tick}}" />
									{{/if}}
								</li>
							{{/each}}
						</ul>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'cancel') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=(localize 'add') onClick=(action "onAddTemplateDoc")}}
			</div>
		</div>
	</div>
</div>
<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'new_import'}}</div>
			<div class="modal-body">
				<div class="import-zone">
					<button id="import-document-button" type="button" class="dmz-button-yellow-light text-center">
						<br>
						{{localize 'new_import_explain1'}}
						<br><br>
						{{localize 'new_import_explain2'}}
						<br><br>
					</button>
					<div class="import-status">
						{{#each importStatus as |status|}}
							<p>{{status}}</p>
						{{/each}}
					</div>
				</div>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'cancel') dismiss=true}}
			</div>
		</div>
	</div>
</div>

<div id="space-export-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'export_html'}}</div>
			<div class="modal-body">
				{{#if hasCategories}}
					<p>{{localize 'export_html_explain1'}}</p>
					{{#each categories as |cat|}}
						{{#ui/ui-checkbox selected=cat.exportSelected}}{{cat.category}}{{/ui/ui-checkbox}}
					{{/each}}
				{{else}}
					<p>{{localize 'export_html_explain2'}}</p>
				{{/if}}
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'cancel') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=(localize 'export') onClick=(action "onExport")}}
			</div>
		</div>
	</div>
</div>