{{layout/logo-heading
	title=(localize 'space')
	desc=(localize 'settings')
	icon=constants.Icon.Settings}}

<form role="form">
	<div class="form-group">
		<label>{{localize 'name'}}</label>
		{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError "form-control is-invalid" "form-control") placeholder="" autocomplete="off"}}
	</div>

	<div class="form-group">
		<label>{{localize 'description'}}</label>
		<div id="space-desc" class="wysiwyg wysiwyg-editor">
			{{{spaceDesc}}}
		</div>
	</div>

	<div class="form-group">
		<label>{{localize 'visibility'}}</label>
		{{ui/ui-select id="spacetypes-dropdown" content=spaceTypeOptions optionValuePath="id" optionLabelPath="label" selection=spaceType action=(action "onSetSpaceType")}}
	</div>

	<div class="form-group">
		<label>Icon</label>
		<div class="ui-icon-picker">
			<ul class="list">
				{{#each iconList as |icon|}}
					<li class="item {{if (eq spaceIcon icon) "selected"}}" {{action "onSetIcon" icon}} role="button" tabindex="0">
						{{ui/ui-icon-meta icon=icon}}
					</li>
				{{/each}}
			</ul>
		</div>
	</div>

	<div class="form-group">
		<label>{{localize 'label'}}</label>
		<ul class="space-label-picker">
			<li class="label none {{if (eq spaceLabel "") "selected"}}" {{action "onSetLabel" ""}} role="button" tabindex="0">{{localize 'none'}}</li>
			{{#each labels as |label|}}
				<li class="label {{if (eq spaceLabel label.id) "selected"}}" role="button" tabindex="0"
					style={{label.bgColor}}
					{{action "onSetLabel" label.id}} title={{label.name}}>
					{{label.name}}
				</li>
			{{/each}}
		</ul>
	</div>

	<div class="form-group">
		<label>{{localize 'feedback_enable'}}</label>
		{{x-toggle value=allowLikes size="medium" theme="light" onToggle=(action (mut allowLikes))}}
	</div>

	{{#if allowLikes}}
		<div class="form-group">
			<label>{{localize 'feedback_prompt'}}</label>
			{{input type="text" id="space-likes-prompt" class="form-control" placeholder=(localize 'feedback_prompt_hint') value=likes}}
			<small class="form-text text-muted">{{localize 'feedback_prompt_explain'}}</small>
		</div>
	{{/if}}
</form>

{{ui/ui-button
	color=constants.Color.Green
	icon=constants.Icon.Settings
	label=(localize 'save')
	light=true
	onClick=(action "onSave")}}