<div>
    <ng-form name="tabbedContentForm">

        <umb-editor-tab-bar ng-if="tabs.length > 0">
            <umb-tabs-nav tabs="tabs" on-tab-change="setActiveTab(tab)"></umb-tabs-nav>
        </umb-editor-tab-bar>

        <umb-box ng-repeat="tab in tabs track by tab.key" ng-show="tab.alias === activeTabAlias && tab.properties.length > 0">
            <umb-box-content data-element="tab-content-{{tab.alias}}">
                <umb-property
                    data-element="property-{{property.alias}}"
                    ng-repeat="property in tab.properties track by property.alias"
                    property="property"
                    node="contentNodeModel"
                    show-inherit="contentNodeModel.variants.length > 1 && property.variation !== 'CultureAndSegment'"
                    inherits-from="defaultVariant.displayName">

                    <umb-property-editor
                        model="property"
                        node="contentNodeModel"
                        preview="(propertyEditorDisabled(property) && allowUpdate) || (!allowUpdate && !property.supportsReadOnly)"
                        allow-unlock="allowUpdate && allowEditInvariantFromNonDefault"
                        on-unlock="unlockInvariantValue(property)"
                        ng-attr-readonly="{{ !allowUpdate || undefined}}">
                    </umb-property-editor>

                </umb-property>
            </umb-box-content>
        </umb-box>

        <div class="umb-group-panel"
            retrive-dom-element="registerPropertyGroup(element[0], attributes.appAnchor)"
            data-app-anchor="{{group.id}}"
            data-element="group-{{group.alias}}"
            ng-repeat="group in content.tabs track by group.key"
            ng-if="group.type === 'Group'"
            ng-show="group.parentAlias === activeTabAlias || tabs.length === 0">

            <div class="umb-group-panel__header">
                <div id="group-{{group.id}}"><h2>{{ group.label }}</h2></div>
            </div>

            <div class="umb-group-panel__content" data-element="tab-content-{{group.type === 'Group' ? group.parentAlias : group.alias}}">
                <umb-property
                    data-element="property-{{property.alias}}"
                    ng-repeat="property in group.properties track by property.alias"
                    property="property"
                    node="contentNodeModel"
                    show-inherit="contentNodeModel.variants.length > 1 && property.variation !== 'CultureAndSegment'"
                    inherits-from="defaultVariant.displayName">

                    <umb-property-editor
                        model="property"
                        node="contentNodeModel"
                        preview="(propertyEditorDisabled(property) && allowUpdate) || (!allowUpdate && !property.supportsReadOnly)"
                        allow-unlock="allowUpdate && allowEditInvariantFromNonDefault"
                        on-unlock="unlockInvariantValue(property)"
                        ng-attr-readonly="{{!allowUpdate || undefined}}">
                    </umb-property-editor>

                </umb-property>
            </div>
        </div>

        <umb-empty-state
            ng-if="content.tabs.length === 0"
            position="center">
            <localize key="content_noProperties">No content can be added for this item</localize>
        </umb-empty-state>

    </ng-form>
</div>
