Archetype/app/views/archetype.html

<div class="archetypeEditor ng-class:model.config.customCssClass" ng-controller="Imulus.ArchetypeController">
    <textarea class="archetypeDeveloperModel" ng-show="model.config.developerMode" ng-model="archetypeRenderModel"></textarea>
    <div class="archetypeFieldsetToolbar" ng-show="model.config.fieldsets.length > 1 && model.config.hideFieldsetToolbar != '1'">
        <ul>
            <li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias)">
                <i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
                <span>{{fieldsetModel.label}}</span>
            </li>
        </ul>
    </div>

    <ul ui-sortable="sortableOptions" ng-model="archetypeRenderModel.fieldsets">
        <li ng-repeat="fieldset in archetypeRenderModel.fieldsets" ng-hide="fieldset.remove">
            <fieldset ng-class="{archetypeFieldsetError: !fieldset.isValid}" ng-init="fieldsetConfigModel = getConfigFieldsetByAlias(fieldset.alias)">

                <div class="archetypeFieldsetLabel" ng-class="{enableCollapsing: model.config.enableCollapsing}">
                    <div ng-click="focusFieldset(fieldset)" class="label-sub module-label">
                        <span class="caret" ng-hide="fieldset.collapse || !model.config.enableCollapsing"></span>
                        <span class="caret caret-right" ng-show="fieldset.collapse && model.config.enableCollapsing"></span>

                        <label>
                            <i class="fieldsetIcon icon ng-class:fieldsetConfigModel.icon"></i>
                            <span ng-bind="getFieldsetTitle(fieldsetConfigModel, $index)"></span>
                        </label>
                    </div>

                    <div class="archetypeEditorControls label-sub" ng-hide="model.config.hideFieldsetControls || model.config.maxFieldsets == '1'">
                        <i class="icon icon-add" ng-click="addRow(fieldset.alias, $index)" ng-show="canAdd()"></i>
                        <i class="icon icon-remove" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                        <i class="icon icon-navigation handle" ng-show="canSort()"></i>
                    </div>
                </div>
                <div class="archetypeCollapser animate-hide" ng-hide="fieldset.collapse">
                    <form class="form-inline">
                        <div ng-class="{archetypePropertyError: getPropertyValidity($parent.$index, property.alias) === false}" class="archetypeProperty control-group" ng-repeat="property in fieldsetConfigModel.properties">
                            <label ng-hide="archetypeConfig.hidePropertyLabels == '1'" class="control-label" for="archetype-property-{{model.alias}}-{{$parent.$index}}-{{$index}}">
                                <span>{{property.label}}</span>
                                <div class="archetypeFieldsetHelpText" ng-show="property.helpText">
                                    <small>{{property.helpText}}</small>
                                </div>
                            </label>

                            <div class="controls">
                                <archetype-property class="archetypeEditor ng-class:property.alias" property="property" fieldset-index="$parent.$index" fieldset="fieldset" archetype-config="model.config" property-config-index="$index" archetype-render-model="archetypeRenderModel" umbraco-property-alias="model.alias"></archetype-property>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </li>
    </ul>
</div>