<div ng-form="$ctrl.form" class="connectionSettings-form-twoColumns">
    <div class="connectionSettings-form-column" ng-if="$ctrl.cubeServerSupported">
        <div class="ui-title ui-fixed-width">
            {{::$ctrl.connectionText}}
            <span class="ui-indicator-medium" ng-class="$ctrl.cubeServerStatusIcon" title="{{$ctrl.cubeServerConnectionResultTooltip}}"></span>
        </div>
        <analysis-services-connection-settings name="cubeServer"
                                               tooltips="$ctrl.cubeServerTooltips"
                                               ng-model="$ctrl.cubeServerSettings"
                                               ng-change="$ctrl.onConfigChange()"
                                               custom-validation="{ connection: $ctrl.cubeServerConnectionResult.OverallStatus != Zap.DataSources.Status.Fail }">
        </analysis-services-connection-settings>
    </div>
    <div class="connectionSettings-form-column" ng-if="$ctrl.warehouseSupported">
        <div class="ui-title ui-fixed-width">
            {{::InitializationText.Title_WarehouseConnection}}
            <span class="ui-indicator-medium" ng-class="$ctrl.warehouseStatusIcon" title="{{$ctrl.warehouseConnectionResultTooltip}}"></span>
        </div>
        <warehouse-connection-settings name="warehouseServer"
                                       tooltips="$ctrl.warehouseServerTooltips"
                                       ng-model="$ctrl.warehouseServerSettings"
                                       ng-change="$ctrl.onConfigChange()"
                                       custom-validation="{ connection: $ctrl.warehouseServerConnectionResult.OverallStatus != Zap.DataSources.Status.Fail }">
        </warehouse-connection-settings>
    </div>
    <div class="connectionSettings-underline"></div>
    <div class="buttonContainer">
        <button type="button" class="button-flat" ng-click="$ctrl.testConnection()" ng-disabled="!$ctrl.isTestable">
            {{ResourceControlText.DataSource_Connect}}
        </button>
        <spinner-medium ng-if="$ctrl.isTesting"></spinner-medium>
        <span ng-if="$ctrl.isTestable && !$ctrl.isTesting" class="{{$ctrl.testConnectionStatusIcon}} ui-indicator-medium" title="{{$ctrl.testConnectionStatusTooltip}}"></span>
    </div>
</div>
