<div class="EditorHeader" role="navigation">
    <div class="EditorHeader-menu">
        <a class="EditorHeader-navBtn EditorHeader-back" ng-click="vm.back()" uib-tooltip="{{ 'Back' | translate }}" tooltip-placement="right" tooltip-popup-delay="300">
            <i class="fa fa-chevron-left fa-lg"></i>
        </a>
        <a ui-sref="designer.home" class="EditorHeader-navBtn EditorHeader-homeNav" uib-tooltip="{{ 'Home page' | translate }}" tooltip-placement="right" tooltip-popup-delay="300">
            <i class="ui-icon ui-designer"></i>
        </a>
        <span class="EditorHeader-brand" translate>
            {{ vm.page.type }} editor
        </span>
        <span ng-if="vm.isExperimentalMode()" class="EditorHeader-brand" translate>
            (Experimental)
        </span>

        <form name="formName" class="form-inline EditorHeader-form" autocomplete="off">
            <input type="text" name="name"
                   artifact-name-validation="bottom"
                   class="form-control EditorHeader-name"
                   id="pageName"
                   placeholder="{{ 'Enter ' +  vm.mode + ' name' | translate }}"
                   ng-model="vm.page.name"
                   ng-trim="false"
                   ng-model-options="{ debounce: 500 }"
                   ui-validate="{alreadyExists : '!vm.isArtifactNameAlreadyExist($value, vm.page)'}"
                   ui-validate-watch="'vm.page'"
                   required>
            <button type="button" id="metadata" ng-if="vm.page.type === 'page' || vm.page.type === 'form' || vm.page.type === 'layout'" class="btn btn-bonita-primary" ng-click="vm.editMetadata(vm.page)"
                    uib-tooltip="{{ vm.page.type + ' information' | translate }}" tooltip-placement="bottom" tooltip-popup-delay="300">
                <i class="ui-icon ui-tags"></i>
            </button>
            <div class="btn-group" uib-dropdown>
                <button id="save" type="button" class="EditorHeader-saveButton btn btn-bonita-primary"  ng-disabled="!formName.$valid || !vm.isPageDirty(page)" ng-click="vm.save(vm.page)" translate>Save</button>
                <button type="button" class="btn btn-bonita-primary uib-dropdown-toggle" ng-disabled="!formName.$valid" uib-dropdown-toggle>
                    <span class="fa fa-caret-down"></span>
                    <span class="sr-only" translate>Save</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a id="saveAs" class="clickable" ng-click="vm.saveAs(vm.page)" ng-disabled="!formName.$valid" translate>Save as ...</a></li>
                    <li ng-if="vm.page.type === 'page' || vm.page.type === 'form'"><a id="convert" class="clickable" ng-click="vm.convert(vm.page)" ng-disabled="!formName.$valid" translate>Convert to ...</a></li>
                </ul>
            </div>
            <button type="button" id="export" class="btn btn-bonita-primary" ng-disabled="!formName.$valid" ng-click="vm.saveAndExport(vm.page)"
                    uib-tooltip="{{ 'Export' | translate }}" tooltip-placement="bottom" tooltip-popup-delay="300">
                <i class="ui-icon ui-export"></i>
            </button>
        </form>
        <open-preview on-open-preview="vm.save(vm.page)" mode="{{vm.mode}}" artifact-id="vm.page.id"
                      is-disabled="!formName.$valid || vm.isPageDirty(vm.page)"></open-preview>
        <div ng-if="vm.page.hasValidationError" uib-tooltip="{{ 'Validation error on the page. Fix is recommended before export' | translate }}" tooltip-placement="bottom" tooltip-popup-delay="300" style="margin-left:10px">
            <i class="fa fa-times-circle fa-lg error-icon"></i>
            <translate>Validation Errors</translate>
        </div>
        <div class="EditorHeader-status">
        <span ng-if="vm.lastReport().status" class="migration-report header-status-icon"
              uib-tooltip="{{ 'Click to see migration report' | translate }}"
              tooltip-placement="bottom"
              tooltip-popup-delay="300"
              ng-click="vm.openMigrationReport()">
                      <span class="fa fa-wrench status"></span>
                      <i ng-if="vm.lastReport().status === 'warning'" class="fa fa-exclamation-circle decorator icon warning"></i>
                      <i ng-if="vm.lastReport().status === 'success'" class="fa fa-check-circle decorator icon success"></i>
                      <i ng-if="vm.lastReport().status === 'error'" class="fa fa-times-circle decorator icon error"></i>
            </span>
            <span ng-if="vm.businessDataRepositoryOffline" class="header-status-icon"
                  uib-tooltip="{{ 'Unable to connect to the Business Data Model. Restarting the Studio may solve this issue' | translate }}"
                  tooltip-placement="bottom"
                  tooltip-popup-delay="300">
                      <span class="fa fa-database status fa-lg"></span>
                      <i class="fa fa-exclamation-circle fa-lg decorator warning icon"></i>
            </span>
        </div>
        <save-indicator class="EditorHeader-saveIndicator"></save-indicator>
    </div>
    <div class="EditorHeader-resolutions">
        <div resolutions-bar id="resolutions" class="btn-group"></div>
    </div>
    <div class="EditorHeader-help">
        <button class="btn btn-bonita-help" open-help editor-mode="{{vm.mode}}" uib-tooltip="{{ 'Open help' | translate }}" tooltip-placement="bottom" tooltip-popup-delay="300"><i class="fa fa-question-circle fa-lg"></i></button>
    </div>
</div>
