{{#if spaces}}
	{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Export label="Export All Content" onClick=(action "onExport")}}
	{{ui/ui-spacer size=300}}

	<div class="view-customize">
		<ul class="space-list">
			{{#each spaces as |space|}}
				<li class="space">
					<div class="info">
						{{#link-to "folder.index" space.id space.slug}}
							<div class="name">
								{{#if (eq space.spaceType constants.SpaceType.Public)}}
									<i class={{concat "dicon " constants.Icon.World}}>
										{{#attach-tooltip showDelay=1000}}Public space{{/attach-tooltip}}
									</i>
								{{/if}}
								{{#if (eq space.spaceType constants.SpaceType.Protected)}}
									<i class={{concat "dicon " constants.Icon.People}}>
										{{#attach-tooltip showDelay=1000}}Protected space{{/attach-tooltip}}
									</i>
								{{/if}}
								{{#if (eq space.spaceType constants.SpaceType.Private)}}
									<i class={{concat "dicon " constants.Icon.Person}}>
										{{#attach-tooltip showDelay=1000}}Personal space{{/attach-tooltip}}
									</i>
								{{/if}}
								{{space.name}}
							</div>
							<div class="desc">Some description that is to be wired up to the backend</div>
						{{/link-to}}
						{{ui/ui-spacer size=200}}
						{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
							{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Green tooltip="Add myself as owner" onClick=(action "onOwner" space.id)}}
							{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete space" onClick=(action "onShow" space.id)}}
						{{/ui/ui-toolbar}}
					</div>
				</li>
			{{/each}}
		</ul>
	</div>

	<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">Space Deletion</div>
				<div class="modal-body">
					<form onsubmit={{action "onDelete"}}>
						<p>Are you sure you want to delete this space and all documents?</p>
						<div class="form-group">
							<label for="delete-space-name">Please type space name to confirm</label>
							{{input type="text" id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpace.name}}
							<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
						</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.Red light=true label=constants.Label.Delete onClick=(action "onDelete")}}
				</div>
			</div>
		</div>
	</div>
{{else}}
	<p>There are no shared spaces to manage</p>
{{/if}}