<div class="l-admin-content">
    <div ng-form="$ctrl.form">
        <div ng-repeat="category in $ctrl.categories.value" class="admin-form ui-fixed-width-wide" tooltip-position="left">
            <span class="ui-title">{{::category.key}}</span>
            <label ng-repeat="setting in category" tooltip tooltip-options="$ctrl.tooltip(setting)" class="ui-field">
                <span class="ui-field-label">{{::setting.Caption}}</span>
                <ng-switch on="setting.Type">
                    <span ng-switch-when="String">
                        <input type="text" name="{{::setting.Key}}" ng-model="$ctrl.settingValue(setting).value" class="ui-input-box ui-field-input">
                    </span>
                    <span ng-switch-when="SecureString">
                        <input type="password" name="{{::setting.Key}}" ng-model="$ctrl.settingValue(setting).value" class="ui-input-box ui-field-input">
                    </span>
                    <span ng-switch-when="Integer">
                        <input type="number" name="{{::setting.Key}}" min="{{::setting.Minimum}}" max="{{::setting.Maximum}}" step="1" integer required ng-model="$ctrl.settingValue(setting).value" class="ui-input-box ui-field-input">
                        <span title="{{::$ctrl.rangeError(setting)}}" class="ui-indicator-error ui-indicator-medium ui-validation"></span>
                    </span>
                    <span ng-switch-when="UnsignedInteger">
                        <input type="number" name="{{::setting.Key}}" min="{{::setting.Minimum}}" max="{{::setting.Maximum}}" step="1" integer required ng-model="$ctrl.settingValue(setting).value" class="ui-input-box ui-field-input">
                        <span title="{{::$ctrl.rangeError(setting)}}" class="ui-indicator-error ui-indicator-medium ui-validation"></span>
                    </span>
                    <span ng-switch-when="Boolean">
                        <switch-input ng-model="$ctrl.settingValue(setting).value" name="{{::setting.Key}}" class="ui-field-input"></switch-input>
                    </span>
                    <span ng-switch-when="Enum">
                        <select ng-model="$ctrl.settingValue(setting).value" name="{{::setting.Key}}" ng-options="item.NumericValue as item.LocalizedValue for item in setting.EnumValues" class="ui-field-input ui-input-box"></select>
                    </span>
                    <span ng-switch-when="TimeSpan">
                        <input type="text" name="{{::setting.Key}}" ng-model="$ctrl.settingValue(setting).value" ng-pattern="$ctrl.timeSpanRegex" class="ui-input-box ui-field-input">
                        <ng-messages for="$ctrl.form[setting.Key].$error">
                            <span ng-message="pattern" title="{{::$ctrl.timeSpanRangeError(setting)}}" class="ui-indicator-error ui-indicator-medium"></span>
                        </ng-messages>
                    </span>
                </ng-switch>
            </label>
        </div>

        <div class="admin-form buttonContainer">
            <spinner-medium ng-if="$ctrl.saving.isPending"></spinner-medium>
            <span ng-if="$ctrl.isSaved" class="ui-indicator-medium ui-indicator-tick"></span>
            <span ng-if="$ctrl.form.$invalid" title="{{::CoreSettingsText.Error_InvalidPropertyValue}}" class="ui-indicator-medium ui-indicator-error"></span>
            <button ng-click="$ctrl.save()" ng-disabled="!$ctrl.canSave" class="button-raised button-primary">{{::ControlText.Label_Save}}</button>
        </div>
    </div>
</div>  