<div class="ui-title">
    {{::InitializationText.Title_DatabaseConnection}}
    <spinner-medium ng-if="$ctrl.isLoadingConnectionInfo"></spinner-medium>
</div>
<div ng-if="!$ctrl.isLoadingConnectionInfo" ng-form="connectionForm" tooltip-position="left">
    <label tooltip="InitializationTooltips.Server" class="ui-field">
        <span class="ui-field-label">{{::InitializationText.Label_Server}}</span>
        <input required type="text" class="ui-input-box ui-field-input"
               name="server"
               ng-model="$ctrl.connectionInfo.Server"
               ng-model-options="{ updateOn: 'default blur', debounce: { default: 500 } }"
               ng-change="$ctrl.onConnectionChange(true)">
        <span class="ui-validation ui-indicator-medium ui-indicator-error" title="{{::InitializationText.Validation_ServerIsEmpty}}"></span>
    </label>

    <div class="ui-field">
        <span class="ui-field-label" tooltip="InitializationTooltips.ZapDatabaseAuthentication">{{::InitializationText.Label_Authentication}}</span>
        <div tooltip="InitializationTooltips.ApplicationPoolServiceAccount">
            <label class="ui-radio">
                <input type="radio" ng-value="{{::Zap.DataSources.ConnectAsAccount.AppPoolServiceAccount}}"
                       ng-model="$ctrl.connectionInfo.ConnectAs"
                       ng-change="$ctrl.onConnectionChange(false)">
                <span class="ui-radio-label">{{::ConnectAsAccountText.ConnectAsAccount_AppPoolServiceAccount}}</span>
            </label>
            <div class="databaseConfiguration-authentication-label ui-indented">
                <span class="ui-text">{{$ctrl.connectionInfo.AppPoolServiceAccount}}</span>
            </div>
        </div>
        <label tooltip="InitializationTooltips.SpecifiedAccount" class="ui-radio">
            <input type="radio" ng-value="{{::Zap.DataSources.ConnectAsAccount.AlternateAccount}}"
                   ng-model="$ctrl.connectionInfo.ConnectAs"
                   ng-change="$ctrl.onConnectionChange(false)">
            <span class="ui-radio-label">{{::InitializationText.Label_SQLServerLogin}}</span>
        </label>
    </div>
    <label tooltip="InitializationTooltips.ZapDatabaseUsername" class="ui-field ui-indented">
        <span class="ui-field-label">{{::InitializationText.SpecifyCredentials_UserNameLabel}}</span>
        <input type="text"
               name="name"
               ng-model="$ctrl.connectionInfo.UserName" ng-model-options="{updateOn: 'default blur', debounce: { default: 500 } }"
               ng-change="$ctrl.onConnectionChange(true)"
               ng-required="$ctrl.connectionInfo.ConnectAs == Zap.DataSources.ConnectAsAccount.AlternateAccount"
               ng-disabled="$ctrl.connectionInfo.ConnectAs != Zap.DataSources.ConnectAsAccount.AlternateAccount"
               class="ui-input-box ui-field-input">
        <span class="ui-validation ui-indicator-medium ui-indicator-error" title="{{::InitializationText.Validation_UserNameIsEmpty}}"></span>
    </label>
    <label tooltip="InitializationTooltips.ZapDatabasePassword" class="ui-field ui-indented">
        <span class="ui-field-label">{{::InitializationText.SpecifyCredentials_PasswordLabel}}</span>
        <input type="password"
               name="password"
               class="ui-input-box ui-field-input"
               ng-model="$ctrl.password" ng-model-options="{updateOn: 'default blur', debounce: { default: 500 } }"
               ng-change="$ctrl.onConnectionChange(false)"
               ng-required="$ctrl.connectionInfo.ConnectAs == Zap.DataSources.ConnectAsAccount.AlternateAccount"
               ng-disabled="$ctrl.connectionInfo.ConnectAs != Zap.DataSources.ConnectAsAccount.AlternateAccount">
        <span class="ui-validation ui-indicator-medium ui-indicator-error" title="{{::InitializationText.Validation_PasswordIsEmpty}}"></span>
    </label>
</div>
