<div class="neos-toolbar">
	<div class="neos-inspector-tabs">
		{{#each tab in groupedViews}}
			<button {{action toggleCurrentInspectorTab tab}} {{bindAttr class=":neos-button tab.isActive:is-active"}} title="{{unbound tab.label}}" data-neos-tooltip data-placement="bottom">
				<i class="{{unbound tab.icon}}"></i>
			</button>
		{{/each}}
	</div>
</div>
<div class="neos-inspector-form">
	<div class="neos-inspector-field">
		<label for="neos-content-breadcrumb"><i class="fas fa-mouse-pointer"></i> <b>{{translate id="content.inspector.inspectorView.selectedElement" fallback="Selected element"}}</b></label>
		{{view view.Breadcrumb}}
	</div>
	{{#each tab in groupedViews}}
		<div {{bindAttr class="tab.isActive:is-visible :neos-inspector-tab-content"}}>
			{{#each group in tab.groups}}
				{{#view view.Section classNames="neos-inspector-section" groupBinding="group" groupNameBinding="group.group" propertiesBinding="group.properties" viewsBinding="group.views" inspectorBinding="controller"}}
					<div {{bindAttr class=":neos-inspector-headline view._hasValidationErrors:neos-validation-error"}}>
						<span title="{{unbound group.label}}" data-neos-tooltip>
							{{#if group.icon}}
								<i class="{{unbound group.icon}}"></i>&nbsp;
							{{/if}}
							{{unbound group.label}}
						</span>
						{{#if view._hasValidationErrors}}<i class="fas fa-warning-sign"></i>{{/if}}
						<div {{bindAttr class=":neos-inspector-collapse view._collapsed:neos-collapsed:neos-open"}} {{action "toggleCollapsed" target="view"}} data-neos-tooltip title="Toggle {{unbound group.label}}"></div>
					</div>
					{{#collection tagName="div" classNames="neos-inspector-field" contentBinding="group.properties"}}
						{{#if isBoolean}}
							<label for="{{unbound elementId}}" class="neos-checkbox">
								{{view view.parentView.parentView.PropertyEditor propertyDefinitionBinding="view.content" inspectorBinding="controller"}}
								{{unbound ui.label}}
								{{#if ui.help.message}}
									{{view view.parentView.parentView.HelpMessage titleBinding="ui.label" contentBinding="ui.help.message" popoverContainer="#neos-inspector" placement="left"}}
								{{/if}}
							</label>
						{{else}}
							<label for="{{unbound elementId}}" title="{{unbound ui.label}}" data-neos-tooltip>
								{{unbound ui.label}}
								{{#if ui.help.message}}
									{{view view.parentView.parentView.HelpMessage titleBinding="ui.label" contentBinding="ui.help.message" popoverContainer="#neos-inspector" placement="left"}}
								{{/if}}
							</label>
							{{view view.parentView.parentView.PropertyEditor propertyDefinitionBinding="view.content" inspectorBinding="controller"}}
						{{/if}}
					{{/collection}}
					{{#collection tagName="div" classNames="neos-inspector-view" contentBinding="group.views"}}
						{{view view.parentView.parentView.ViewView viewDefinitionBinding="view.content" inspectorBinding="controller"}}
					{{/collection}}
				{{/view}}
			{{/each}}
		</div>
	{{/each}}
</div>
{{#if _enableTransactionalInspector}}
	<div class="neos-actions">
		<button class="neos-inspector-cancel" title="{{translate id='discardChanges' fallback='Discard changes'}}" {{bindAttr disabled="unmodified"}} {{action "revert"}}>{{translate id="discardChanges" fallback="Discard changes"}}</button>
		{{#if hasValidationErrors}}
			<button class="neos-button neos-inspector-apply neos-disabled" title="{{translate id='content.inspector.inspectorView.selectedElement' fallback='There are fields that are not correctly filled in.'}}">
				<i class="fas fa-warning-sign"></i> {{translate id='okay' fallback='OK'}}
			</button>
		{{else}}
			<button class="neos-inspector-apply" title="{{translate id='applyChanges' fallback='Apply changes'}}" {{bindAttr disabled="unmodified"}} {{action "apply"}}>{{translate id="apply" fallback="Apply"}}</button>
		{{/if}}
	</div>
{{/if}}
