{{#layout/master-sidebar selectedItem="spaces"}}
	{{ui/ui-spacer size=300}}

	<div class="section">
		<div class="title">filter</div>
		<div class="list">
			<div class="item {{if (eq selectedView "all") "selected"}}" {{action "onSelect" "all"}}>
				<i class={{concat "dicon " constants.Icon.All}} />
				<div class="name">All ({{model.length}})</div>
			</div>
			<div class="item {{if (eq selectedView "public") "selected"}}" {{action "onSelect" "public"}}>
				<i class={{concat "dicon " constants.Icon.World}} />
				<div class="name">Public ({{publicSpaces.length}})</div>
			</div>
			{{#if session.authenticated}}
				<div class="item {{if (eq selectedView "protected") "selected"}}" {{action "onSelect" "protected"}}>
					<i class={{concat "dicon " constants.Icon.People}} />
					<div class="name">Protected ({{protectedSpaces.length}})</div>
				</div>
				<div class="item {{if (eq selectedView "personal") "selected"}}" {{action "onSelect" "personal"}}>
					<i class={{concat "dicon " constants.Icon.Person}} />
					<div class="name">Personal ({{personalSpaces.length}})</div>
				</div>
			{{/if}}
		</div>
	</div>
{{/layout/master-sidebar}}

{{#layout/master-content}}
	<div class="grid-container-8-2">
		<div class="grid-cell-1">
			{{layout/page-heading title=appMeta.title}}
			{{layout/page-desc desc=appMeta.message}}
		</div>
		<div class="grid-cell-2 grid-cell-right">
			{{#if (or session.isEditor session.isAdmin)}}
				{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true tooltip="New space"}}
					{{#if session.isEditor}}
						{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green onClick=(action "onShowModal")}}
						{{ui/ui-toolbar-label label="SPACE" color=constants.Color.Green onClick=(action "onShowModal")}}
					{{/if}}
				{{/ui/ui-toolbar}}
			{{/if}}
		</div>
	</div>

	{{ui/ui-spacer size=400}}

	{{spaces/space-list spaces=selectedSpaces}}

	<div class="modal" tabindex="-1" role="dialog" id="add-space-modal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">Add Space</div>
				<div class="modal-body">
					<form onsubmit={{action "onAddSpace"}}>
						<div class="form-group">
							<label for="new-space-name">Space Name</label>
							{{input type="text" id="new-space-name" class="form-control mousetrap" placeholder="Space name" value=spaceName}}
							<small class="form-text text-muted">Characters and numbers only</small>
						</div>
						<div class="form-group">
							<label for="clone-space-dropdown">Clone Space</label>
							{{ui/ui-select id="clone-space-dropdown" content=model prompt="select space" action=(action "onCloneSpaceSelect") optionValuePath="id" optionLabelPath="name" selection=clonedSpace}}
							<small id="emailHelp" class="form-text text-muted">Copy templates, permissions, documents from existing space</small>
							<div class="margin-top-10" />
							{{#if hasClone}}
								{{#ui/ui-checkbox selected=copyTemplate}}Copy templates{{/ui/ui-checkbox}}
								{{#ui/ui-checkbox selected=copyPermission}}Copy permissions{{/ui/ui-checkbox}}
								{{#ui/ui-checkbox selected=copyDocument}}Copy documents{{/ui/ui-checkbox}}
							{{/if}}
						</div>
					</form>
				</div>
				<div class="modal-footer">
					{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
					{{ui/ui-button-gap}}
					{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddSpace")}}
				</div>
			</div>
		</div>
	</div>
{{/layout/master-content}}