<div class="ui-fixed-width" ng-form="connectionForm" tooltip-anchor tooltip-position="right">

    <label tooltip="{{::$ctrl.tooltips.serverType}}" class="ui-field">
        <span class="ui-field-label">{{::AnalysisServicesConnectionText.ServerType}}</span>
        <select name="serverType"
                ng-model="$ctrl.serverType"
                ng-options="serverType.value as serverType.text for serverType in $ctrl.availableServerTypes"
                ng-change="$ctrl.onConfigChanged(false)"
                class="ui-field-input ui-input-box"></select>
    </label>

    <div class="modeller-header-spacer"></div>

    <div ng-if="$ctrl.serverType == Zap.DataSources.WarehouseServerType.MsSql">
        <ms-sql-server-warehouse-connection-settings config="$ctrl.config"
                                                     tooltips="$ctrl.tooltips" 
                                                     password="$ctrl.password"
                                                     on-config-changed="$ctrl.onConfigChanged(resetPassword)">
        </ms-sql-server-warehouse-connection-settings>
    </div> 

    <div ng-if="$ctrl.serverType == Zap.DataSources.WarehouseServerType.ByoAzureSql">
        <byo-azure-sql-warehouse-connection-settings config="$ctrl.config" 
                                                     tooltips="$ctrl.tooltips"  
                                                     password="$ctrl.password"
                                                     on-config-changed="$ctrl.onConfigChanged(resetPassword)">
        </byo-azure-sql-warehouse-connection-settings>
    </div>

</div>