<div class="blade-static __bottom" ng-include="'$(Platform)/Scripts/common/templates/create.tpl.html'"
     ng-if="blade.isNew"></div>
<div class="blade-content">
  <div class="blade-inner">
    <div class="inner-block">
      <form class="form" name="formScope">
        <div class="form-group">
          <label class="form-label">{{ 'pageBuilder.blades.edit-page.labels.relativePath' | translate }}</label>
          <div class="form-input">
            <input class="form-control" value="{{ blade.origEntity.relativeUrl }}" id="relativeUrlInput" readonly="readonly" />
            <button class="btn __ico" type="button" ng-click="copyToClipboard('relativeUrlInput')" title="{{ 'platform.commands.copy' | translate }}">
              <i class="btn-ico fas fa-paste"></i>
            </button>
          </div>
        </div>
        <div class="form-group" ng-init="setForm(formScope)">
          <label class="form-label">{{ 'pageBuilder.blades.edit-page.labels.filename' | translate }}</label>
          <div class="form-input __langs">
            <label class="lang-code">{{blade.origEntity.language}}</label>
            <input required focus-on="" name="pageName" ng-model="blade.currentEntity.pageName" placeholder="{{ 'content.blades.edit-page.placeholders.name' | translate }}" ui-validate=" 'validators.webSafeFileNameValidator($value)' " />
          </div>
          <div class="form-error" ng-show="formScope.pageName.$dirty">
            <span ng-show="formScope.pageName.$error.validator">{{ 'pageBuilder.blades.edit-page.validations.pageName-invalid' | translate }}</span>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{ 'content.blades.edit-page.labels.language' | translate }}</label>
          <div class="form-input">
            <ui-select ng-model="blade.currentEntity.language">
              <ui-select-match allow-clear
                               placeholder="{{ 'content.blades.edit-page.placeholders.language' | translate }}">{{$select.selected}}</ui-select-match>
              <ui-select-choices repeat="x in languages">
                <span class="flag flag-{{x.substr(3).toLowerCase()}}"></span>
                <span ng-bind-html="x"></span>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">{{ 'pageBuilder.blades.edit-page.labels.permalink' | translate }}</label>
          <div class="form-input">
            <input focus-on="" ui-validate-async=" 'validatePermalink($value)' " class="form-control"
                   ng-model="blade.currentEntity.settings.permalink" placeholder="Permalink"
                   name="permalink" />
          </div>
          <span class="comment-text" ng-if="permalinkDuplicates.length">
            <img src="/images/layout/warning.svg" class="comment-icon">
            {{ 'pageBuilder.blades.edit-page.validations.permalink-invalid' | translate }}
          </span>
          <div class="comment-text" ng-repeat="link in permalinkDuplicates">
            {{ link.name }}: {{ link.relativeUrl }}
          </div>
        </div>
      </form>
    </div>
  </div>
</div>