<div class="umb-property-editor" ng-controller="Umbraco.PrevalueEditors.IncludePropertiesListViewController">
    <div class="control-group">
        <select ng-model="selectedField" ng-change="changeField()" val-highlight="{{hasError}}">
            <optgroup label="System Fields">
                <option ng-repeat="field in systemFields" value="_system_{{field.value}}" ng-bind="field.name"></option>
            </optgroup>
            <optgroup label="Custom Fields">
                <option ng-repeat="alias in propertyAliases" value="{{alias}}" ng-bind="alias"></option>
            </optgroup>
        </select>
        <button type="button" class="btn" ng-click="addField()">
            <localize key="general_add">Add</localize>
        </button>
        <span class="help-inline" ng-bind="errorMsg"></span>
    </div>
    <div class="control-group">
        <table class="table" ng-show="model.value.length > 0">
            <thead>
                <tr>
                    <td></td>
                    <th><localize key="general_alias">Alias</localize></th>
                    <th><localize key="general_header">Header</localize></th>
                    <th><localize key="template_template">Template</localize></th>
                    <td></td>
                </tr>
            </thead>
            <tbody ui-sortable="sortableOptions" ng-model="model.value">
                <tr ng-repeat="val in model.value">
                    <td>
                        <umb-icon icon="icon-navigation" class="icon handle" aria-label="Sort"></umb-icon>
                    </td>
                    <td>
                       <div class="list-view-layout__name flex-column content-start">
                            <span class="list-view-layout__name-text" ng-bind="val.alias"></span>
                            <span class="list-view-layout__system" ng-show="val.isSystem == 1">(<localize key="general_systemField">systemField</localize>)</span>
                       </div>
                    </td>
                    <td>
                        <ng-form name="headerForm" ng-if="!val.isSystem">
                            <input type="text" name="header" ng-model="val.header" required />
                            <span ng-messages="headerForm.header.$error" show-validation-on-submit>
                                <span class="help-inline" ng-message="required">
                                    <localize key="general_required">Required</localize>
                                </span>
                            </span>
                        </ng-form>

                        <span ng-if="val.isSystem">
                            <localize key="{{getLocalizedKey(val.alias)}}">{{val.alias}}</localize>
                        </span>
                    </td>
                    <td>
                        <ng-form name="templateForm" ng-if="!val.isSystem">
                            <input type="text" name="template" ng-model="val.nameTemplate" />
                        </ng-form>
                    </td>
                    <td>
                        <button type="button" class="umb-node-preview__action umb-node-preview__action--red" ng-click="removeField(val)">
                            <localize key="general_remove">Remove</localize><span class="sr-only"> {{val.alias}}</span>
                        </button>
                    </td>
                </tr>
            </tbody>

        </table>
    </div>

</div>