<div data-element="editor-header" class="umb-editor-header" ng-class="{'-split-view-active': splitViewOpen === true}">

    <div class="flex items-center" style="height: 100%;">

        <div ng-if="showBackButton === true && splitViewOpen !== true" style="margin-right: 15px;">
            <a class="umb-editor-header__back" href="#" ng-click="goBack()" prevent-default>
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
            </a>
        </div>

        <div class="flex items-center" style="flex: 1;">

            <ng-form data-element="editor-icon" name="iconForm">
                <div class="umb-panel-header-icon" ng-if="!hideIcon" ng-click="openIconPicker()" ng-class="{'-placeholder': $parent.icon==='' || $parent.icon===null}"
                     title="{{$parent.icon}}">
                    <i class="icon {{$parent.icon}}" ng-if="$parent.icon!=='' && $parent.icon!==null"></i>
                    <div class="umb-panel-header-icon-text" ng-if="$parent.icon==='' || $parent.icon===null">
                        <localize key="settings_addIcon"></localize>
                    </div>
                </div>
            </ng-form>

            <div id="nameField" class="umb-editor-header__name-and-description" style="flex: 1 1 auto;">
                <div class="umb-editor-header__name-wrapper" ng-show="!nameLocked || !hideAlias">
                    <ng-form name="headerNameForm">
                        <input data-element="editor-name-field"
                               no-password-manager
                               title="{{key}}"
                               type="text"
                               class="umb-editor-header__name-input"
                               localize="placeholder"
                               placeholder="@placeholders_entername"
                               name="headerName"
                               ng-show="!nameLocked"
                               ng-model="name"
                               ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
                               umb-auto-focus
                               val-server-field="Name"
                               required
                               autocomplete="off" />
                    </ng-form>

                    <umb-generate-alias data-element="editor-alias"
                                        class="umb-panel-header-alias"
                                        ng-if="!hideAlias"
                                        alias="$parent.alias"
                                        alias-from="$parent.name"
                                        enable-lock="true"
                                        validation-position="'right'"
                                        server-validation-field="Alias">
                    </umb-generate-alias>

                </div>

                <div class="umb-panel-header-name" ng-if="nameLocked" title="{{key}}">{{ name }}</div>

                <input data-element="editor-description"
                       no-password-manager
                       type="text"
                       class="umb-panel-header-description"
                       localize="placeholder"
                       placeholder="@placeholders_enterDescription"
                       ng-if="!hideDescription && !descriptionLocked"
                       ng-model="$parent.description" />

                <div class="umb-panel-header-locked-description" ng-if="descriptionLocked">{{ description }}</div>

            </div>

        </div>

        <div ng-if="navigation && splitViewOpen !== true">
            <umb-editor-navigation
                data-element="editor-sub-views"
                navigation="navigation"
                on-select="selectNavigationItem(item)">
            </umb-editor-navigation>
        </div>

        <div ng-if="menu.currentNode && splitViewOpen !== true && hideActionsMenu !== true">
            <umb-editor-menu
                data-element="editor-actions"
                current-node="menu.currentNode"
                current-section="{{menu.currentSection}}">
            </umb-editor-menu>
        </div>

    </div>

</div>
