<div class="modal-header">
    <button ng-click="cancel()" type="button" aria-label="Close" class="close closebtn">&times;</button>
    <span class="modal-title">{{'Edit field' | translate}}</span>
</div>
<div class="modal-body">
    <form name="typeForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">
                {{'Display name' | translate}}<small class="text-danger">*</small>
            </label>
            <div class="col-sm-9">
                <input ng-model="field.label" type="text" class="form-control" required />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">
                {{'Internal name' | translate}}<small class="text-danger">*</small>
            </label>
            <div class="col-sm-9">
                <input ng-model="field.key" ng-disabled="!isNewForm" type="text" class="form-control" wizdom365-unique="reservedKeys" required />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">{{'Type' | translate}}</label>
            <div class="col-sm-9">
                <select ng-model="field.type" ng-change="typeChanged()" class="form-control">
                    <option value="text">{{'Text' | translate}}</option>
                    <option value="textarea">{{'Richtext' | translate}}</option>
                    <option value="html">{{'HTML' | translate}}</option>
                    <option value="number">{{'Number' | translate}}</option>
                    <option value="date">{{'Date' | translate}}</option>
                    <option value="checkbox">{{'Checkbox' | translate}}</option>
                    <option value="radio">{{'Radio buttons' | translate}}</option>
                    <option value="select">{{'Select' | translate}}</option>
                    <option value="principals">{{'People picker' | translate}}</option>
                </select>
                <div ng-if="field.type === 'radio' || field.type === 'select'">
                    <small class="text-muted">{{'Each line is a new option' | translate}}</small>
                    <textarea ng-model="field.optionsText"
                              ng-change="setFieldOptions()"
                              ng-list="&#10;"
                              ng-trim="false"
                              rows="5"
                              class="form-control"
                              placeholder="{{'Example option' | translate}} 1&#10;{{'Example option' | translate}} 2"
                              required></textarea>
                </div>
                <div ng-if="field.type === 'number'" class="row">
                    <div class="col-sm-4">
                        <small class="text-muted">{{'Step' | translate}}</small>
                        <input type="number" name="numberStep" class="form-control input-sm" step="any" min="0" max="{{field.max}}" ng-model="field.step" />
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted">{{'Min' | translate}}</small>
                        <input type="number" name="numberMin" class="form-control input-sm" max="{{field.max}}" ng-model="field.min" />
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted">{{'Max' | translate}}</small>
                        <input type="number" name="numberMax" class="form-control input-sm" min="{{field.min}}" ng-model="field.max" />
                    </div>
                </div>
                <div ng-if="field.type === 'principals'" class="row">
                    <div class="col-sm-6">
                        <small class="text-muted">{{'Mode' | translate}}</small>
                        <select ng-model="field.principalMode" ng-init="field.principalMode = 'all'" class="form-control input-sm">
                            <option value="all">{{'Users and groups' | translate}}</option>
                            <option value="users">{{'Users' | translate}}</option>
                            <option value="groups">{{'Groups' | translate}}</option>
                        </select>
                    </div>
                    <div class="col-sm-6">
                        <small class="text-muted">{{'Domain' | translate}}</small>
                        <select ng-model="field.principalDomain" ng-init="field.principalDomain = 'all'" class="form-control input-sm">
                            <option value="all">{{'Internals and externals' | translate}}</option>
                            <option value="internals">{{'Internals' | translate}}</option>
                            <option value="externals">{{'Externals' | translate}}</option>
                        </select>
                    </div>
                </div>
                <div ng-if="field.type === 'select' || field.type === 'principals'" class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="field.allowMultiple" />{{'Allow multiple' | translate}}
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">{{'Default value' | translate}}</label>
            <div class="col-sm-9" ng-switch="field.type">
                <input    ng-switch-when="text" type="text" class="form-control" ng-model="field.defaultValue" />
                <textarea ng-switch-when="textarea" ui-tinymce toolbar-configuration="LiveTiles" ng-model="field.defaultValue"></textarea>
                <div      ng-switch-when="html" ui-ace="{mode: 'html'}" ng-model="field.defaultValue"></div>
                <input    ng-switch-when="number" type="number" class="form-control" step="{{field.step}}" min="{{field.min}}" max="{{field.max}}" ng-model="field.defaultValue" />
                <div      ng-switch-when="date" wizdom365-datetime-picker show-date-picker="true" date="field.defaultValue"></div>
                <div      ng-switch-when="checkbox" class="checkbox"><label><input type="checkbox" ng-model="field.defaultValue" /></label></div>
                <div      ng-switch-when="radio" ng-repeat="option in field.options" class="radio"><label><input type="radio" ng-model="field.defaultValue" ng-value="option.value" />{{option.name}}</label></div>
                <select   ng-switch-when="select" ng-if="!field.allowMultiple" class="form-control" ng-options="option.value as option.name for option in field.options" ng-model="field.defaultValue"></select>
                <select   ng-switch-when="select" ng-if="field.allowMultiple" multiple class="form-control" ng-options="option.value as option.name for option in field.options" ng-model="field.defaultValue"></select>
                <wizdom365-principalpicker ng-switch-when="principals" principals="field.defaultValue" mode="{{field.principalMode}}" domain="{{field.principalDomain}}" allowmultiple="{{field.allowMultiple}}" add-fn="addPrincipal(principal)" remove-fn="removePrincipal(principal)" placeholder=""></wizdom365-principalpicker>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-disabled="loading" ng-click="cancel();">{{(hasPendingChanges() ? 'Cancel' : 'Close') | translate}}</button>
    <button class="btn btn-success" ng-if="hasPendingChanges()" ng-click="save();" ng-disabled="typeForm.$invalid">{{'Save' | translate}}</button>
</div>