<div ng-form="$ctrl.form" ng-model-options="{}">
    <label class="ui-field ui-checkbox" tooltip="InitializationTooltips.Impersonate" ng-disabled="$ctrl.ngDisabled">
        <input type="checkbox"
               name="impersonate"
               ng-model="$ctrl.credentials.Impersonate"
               ng-change="$ctrl.onChange()"
               ng-disabled="$ctrl.ngDisabled" />
        <span class="ui-checkbox-label">{{::$ctrl.impersonateLabel}}</span>
        <span ng-show="$ctrl.visibleEnabledError" class="ui-indicator-small ui-indicator-error" title="{{upgrade.visibleEnabledError}}"></span>
    </label>
    <label ng-if="$ctrl.credentials.Impersonate" class="ui-field ui-indented" tooltip="InitializationTooltips.ImpersonateUsername">
        <span class="ui-field-label">{{::InitializationText.SpecifyCredentials_UserNameLabel}}</span>
        <input required type="text" class="ui-input-box ui-field-input"
               name="userName"
               ng-model="$ctrl.credentials.DomainUserName"
               ng-change="$ctrl.onChange()"
               ng-pattern="'[^\\\\@]+[\\\\@][^\\\\@]+'"
               custom-validation="{ user: !$ctrl.visibleUserError }" />
        <ng-messages for="$ctrl.form.userName.$error" ng-if="$ctrl.form.userName.$touched">
            <span ng-message="pattern" class="ui-indicator-medium ui-indicator-error" title="{{::InitializationText.Validation_NoDomain}}"></span>
            <span ng-message="required" class="ui-indicator-medium ui-indicator-error" title="{{::InitializationText.Validation_UserNameIsEmpty}}"></span>
            <span ng-message="user" class="ui-indicator-medium ui-indicator-error" title="{{$ctrl.visibleUserError}}"></span>
        </ng-messages>
    </label>
    <label ng-if="$ctrl.credentials.Impersonate" class="ui-field ui-indented" tooltip="InitializationTooltips.ImpersonatePassword">
        <span class="ui-field-label">{{::InitializationText.SpecifyCredentials_PasswordLabel}}</span>
        <input required type="password" class="ui-input-box ui-field-input"
               name="password"
               ng-model="$ctrl.credentials.Password"
               ng-change="$ctrl.onChange()"
               custom-validation="{ password: !$ctrl.visiblePasswordError }" />
        <ng-messages for="$ctrl.form.password.$error" ng-if="$ctrl.form.password.$touched">
            <span ng-message="required" class="ui-indicator-medium ui-indicator-error" title="{{::InitializationText.Validation_PasswordIsEmpty}}"></span>
            <span ng-message="password" class="ui-indicator-medium ui-indicator-error" title="{{$ctrl.visiblePasswordError}}"></span>
        </ng-messages>
    </label>
</div>
