<div class="umb-property">
    <ng-form name="propertyForm">
        <div class="control-group umb-control-group"
             ng-class="{'hidelabel':vm.hideLabel || vm.property.hideLabel, '--label-on-top':vm.property.labelOnTop, 'umb-control-group__listview': vm.property.alias === '_umb_containerView'}">

            <val-property-msg></val-property-msg>

            <div class="umb-el-wrap">

                <div class="control-header" ng-hide="(vm.hideLabel || vm.property.hideLabel) === true">

                    <label data-element="property-label-{{vm.property.alias}}" class="control-label" for="{{vm.property.alias}}" ng-attr-title="{{vm.controlLabelTitle}}">{{vm.property.label}}<span ng-if="vm.property.validation.mandatory || vm.property.ncMandatory"><strong class="umb-control-required">*</strong></span></label>

                    <umb-property-actions actions="vm.propertyActions"></umb-property-actions>

                    <small class="control-description" ng-if="vm.property.description" ng-bind-html="vm.property.description | simpleMarkdown"></small>

                    <div ng-if="vm.property.extendedDescription">

                      <div ng-if="vm.property.extendedDescriptionVisible">
                        <small class="control-description" ng-bind-html="vm.property.extendedDescription | simpleMarkdown"></small>
                      </div>

                      <button type="button" class="btn btn-mini btn-link btn-link-reverse p0" ng-click="vm.property.extendedDescriptionVisible = !vm.property.extendedDescriptionVisible">
                          <localize ng-if="!vm.property.extendedDescriptionVisible" key="general_readMore"></localize>
                          <localize ng-if="vm.property.extendedDescriptionVisible" key="general_close"></localize>
                      </button>

                    </div>

                    <div class="umb-property-variant-label-container" ng-if="vm.showInherit && vm.property && vm.node">

                        <span ng-if="vm.property.variations === 'Nothing'" class="umb-property-variant-label">
                            <localize key="general_shared"></localize>
                        </span>

                        <span ng-if="vm.property.variations === 'Segment' && vm.node.documentType.variations === 'CultureAndSegment'" class="umb-property-variant-label">
                            <localize key="languages_invariantLanguageProperty"></localize>
                        </span>

                        <span ng-if="vm.property.variations === 'Culture' || vm.property.variations === 'CultureAndSegment'" class="umb-property-variant-label">
                            {{ vm.property.culture }}
                        </span>

                        <span ng-if="vm.property.variations === 'Culture' && vm.node.documentType.variations === 'CultureAndSegment'" class="umb-property-variant-label">
                            <localize key="languages_invariantSegmentProperty"></localize>
                        </span>

                        <span ng-if="vm.property.variations === 'Segment' || vm.property.variations === 'CultureAndSegment'" class="umb-property-variant-label">
                            <span>{{ vm.property.segment }}</span>
                            <span ng-if="!vm.property.segment">Default</span>
                        </span>

                    </div>

                </div>

                <div class="controls" ng-transclude>
                </div>
            </div>
        </div>
    </ng-form>
</div>
