<div data-element="property-{{vm.property.alias}}" class="umb-group-builder__property" ng-class="{'-active': vm.dialogIsOpen, '-active': vm.property.propertyState=='active', '-inherited': vm.property.inherited, '-locked': vm.property.locked, 'umb-group-builder__property-handle -sortable': vm.sortable && !vm.property.inherited, '-sortable-locked': vm.sortable && vm.property.inherited}">

  <!-- property meta text -->
  <div class="umb-group-builder__property-meta" ng-class="{'-full-width': vm.sortable}" data-element="{{vm.valTabAlias}}">

    <ng-form name="propertyTypeForm">
      <div class="control-group -no-margin" ng-if="!vm.sortable">

        <div class="umb-group-builder__property-meta-alias umb-locked-field__text cursor-not-allowed" style="padding-left: 1px" ng-if="vm.property.inherited || vm.property.locked">{{ vm.property.alias }}</div>
        <umb-locked-field ng-if="!vm.property.inherited && !vm.property.locked"
                          locked="locked"
                          ng-model="vm.property.alias"
                          placeholder-text="'Alias...'"
                          server-validation-field="{{ vm.valServerFieldAlias }}">
        </umb-locked-field>

        <div class="umb-group-builder__property-meta-label">
          <textarea localize="placeholder"
                    placeholder="@placeholders_label"
                    ng-model="vm.property.label"
                    ng-disabled="vm.property.inherited || vm.property.locked"
                    name="groupName"
                    umb-auto-resize
                    required
                    val-server-field="{{ vm.valServerFieldLabel }}">
                  </textarea>

          <div ng-messages="propertyTypeForm.groupName.$error" show-validation-on-submit>
            <div class="umb-validation-label" ng-message="valServerField">{{propertyTypeForm.groupName.errorMsg}}</div>
            <div class="umb-validation-label" ng-message="required"><localize key="contentTypeEditor_requiredLabel">Required label</localize></div>
          </div>

        </div>

        <div class="umb-group-builder__property-meta-description">
          <textarea localize="placeholder"
                    placeholder="@placeholders_enterDescription"
                    ng-model="vm.property.description"
                    ng-disabled="vm.property.inherited || vm.property.locked"
                    umb-auto-resize>
                  </textarea>
        </div>
      </div>
    </ng-form>

    <div ng-if="vm.sortable" class="flex items-center">
      <umb-icon icon="icon-navigation" class="icon" ng-if="!vm.property.inherited" style="margin-right: 10px;"></umb-icon>
      <span class="umb-group-builder__property-meta-label">{{ vm.property.label }}</span>
      <span class="umb-group-builder__property-meta-alias" style="margin-bottom: 0; margin-left: 5px; margin-top: 1px;">({{ vm.property.alias }})</span>
      <input name="propertySortOrder" type="number" class="umb-group-builder__group-sort-value umb-property-editor-tiny" ng-model="vm.property.sortOrder" ng-disabled="vm.property.inherited" ng-blur="vm.changeSortOrderValue()" />
    </div>

  </div>


  <div tabindex="-1" class="umb-group-builder__property-preview" ng-if="!vm.sortable" ng-class="{'-not-clickable': !vm.sortable && (vm.property.inherited || vm.property.locked)}">

    <div class="umb-group-builder__property-tags">

      <span class="umb-group-builder__property-tag -white">
        <span ng-if="vm.property.dataTypeName !== undefined">{{vm.property.dataTypeName}}</span>
        <span ng-if="vm.property.dataTypeName == undefined"><localize key="general_preview">Preview</localize></span>
      </span>

      <div class="umb-group-builder__property-tag -white" ng-if="vm.property.validation.mandatory">
        <span class="umb-group-builder__property-tag-icon">*</span>
        <localize key="general_mandatory">Mandatory</localize>
      </div>

      <div class="umb-group-builder__property-tag -white" ng-if="vm.property.showOnMemberProfile">
        <umb-icon icon="icon-eye" class="umb-group-builder__property-tag-icon"></umb-icon>
        <localize key="contentTypeEditor_showOnMemberProfile">Show on member profile</localize>
      </div>

      <div class="umb-group-builder__property-tag -white" ng-if="vm.property.memberCanEdit">
        <umb-icon icon="icon-edit" class="umb-group-builder__property-tag-icon"></umb-icon>
        <localize key="contentTypeEditor_memberCanEdit">Member can edit</localize>
      </div>

      <div class="umb-group-builder__property-tag -white" ng-if="vm.property.isSensitiveData">
        <umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
        <localize key="contentTypeEditor_isSensitiveData">Is sensitive data</localize>
      </div>

      <div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowCultureVariant">
        <umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
        <localize key="contentTypeEditor_cultureVariantLabel">Vary by culture</localize>
      </div>

      <div class="umb-group-builder__property-tag -white" ng-if="vm.property.allowSegmentVariant">
        <umb-icon icon="icon-shuffle" class="umb-group-builder__property-tag-icon"></umb-icon>
        <localize key="contentTypeEditor_segmentVariantLabel">Vary by segments</localize>
      </div>

    </div>

    <div class="umb-group-builder__property-tags -right">
      <div class="umb-group-builder__property-tag" ng-if="vm.property.inherited">
        <umb-icon icon="icon-merge" class="umb-group-builder__property-tag-icon"></umb-icon>
        <span style="margin-right: 3px"><localize key="contentTypeEditor_inheritedFrom">Inherited from</localize></span>
        <button type="button" class="btn btn-small btn-link p0" ng-click="vm.clickComposition(vm.property.contentTypeId)">
          {{vm.property.contentTypeName}}
        </button>
      </div>

      <div class="umb-group-builder__property-tag" ng-if="vm.property.locked">
        <umb-icon icon="icon-lock" class="umb-group-builder__property-tag-icon"></umb-icon>
        <localize key="general_locked">Locked</localize>
      </div>
    </div>

    <ng-form inert class="umb-group-builder__property-preview-form" name="propertyEditorPreviewForm" umb-disable-form-validation ng-click="vm.edit()" tabindex="-1">
      <umb-property-editor ng-if="vm.property.view !== undefined"
                           model="vm.property"
                           preview="true">
      </umb-property-editor>
    </ng-form>

    <button type="button" aria-label="Open settings" class="umb-group-builder__open-settings" ng-if="!vm.property.inherited && !vm.property.locked" ng-click="vm.edit()"></button>

  </div>

  <!-- row tools -->
  <div class="umb-group-builder__property-actions" ng-if="!vm.sortable">

    <div ng-if="!vm.property.inherited">

      <!-- settings for property -->
      <div class="umb-group-builder__property-action">
        <button type="button" aria-label="Open settings" class="btn-icon" ng-click="vm.edit()" localize="title" title="@general_edit">
          <umb-icon icon="icon-settings"></umb-icon>
        </button>
      </div>

      <!-- delete property -->
      <div ng-if="!vm.property.locked" class="umb-group-builder__property-action">
        <button type="button" aria-label="Delete property" class="btn-icon" ng-click="vm.remove()">
          <umb-icon icon="icon-trash"></umb-icon>
        </button>
      </div>

    </div>

  </div>

</div>
