<div id="outer" class="outer-wrapper">
	<div id="dataservice-new-container" class="container-fluid" ng-controller="DSNewController as vm">
	
	    <!-- Content shown if No Sources yet -->
	    <div id="dataservice-new-nosources" ng-show="vm.hasSources==false" class="col-md-12 row">
            <span translate="dataservice-new.newSourceMsg" />
                <a href ng-click="vmmain.selectPage('svcsource-new')">
                <span class="fa fa-fw {{vmmain.page('svcsource-new').icon}}">
            </span>
            <span>{{vmmain.page('svcsource-new').title}}</span></a>
        </div>

        <div id="dataservice-new-controls" ng-show="vm.hasSources==true" class="col-md-12 row">
            <h4>
                <span translate="dataservice-new.instructionsMsg" />
                    <a href ng-click="vmmain.selectPage('svcsource-new')">
                    <span class="fa fa-fw {{vmmain.page('svcsource-new').icon}}">
                </span>
                <span>{{vmmain.page('svcsource-new').title}}</span></a>
            </h4>
            <uib-tabset>
                <uib-tab heading="{{:: 'dataservice-new.wizardTab' | translate}}" active="vm.wizardTabActive">
                    <dataservice-edit-wizard></dataservice-edit-wizard>
                </uib-tab>
                <uib-tab heading="{{:: 'dataservice-new.expertTab' | translate}}" active="vm.expertTabActive" disable="vm.disableExpertTab" ng-click="vm.onExpertTabSelected()">
                    <div class="col-md-12">
                        <h4 class="pull-left">{{'dataservice-new.viewDdlTitle' | translate}}</h4>
                    </div>
                    <div class="col-md-8">
                        <i>{{'dataservice-new.viewDdlInstructions' | translate}}</i>
                        <div ui-codemirror="{ onLoad : vm.editorLoaded }" ng-model="vm.viewDdl" ui-codemirror-opts="vm.ddlEditorOptions" ui-refresh="vm.refreshViewDdl"></div>
                        <div class="has-error" ng-if="vm.showDdlError">
                            <span class="help-block">{{vm.ddlErrorMsg}}</span>
                        </div>
                    </div>
                    <div class="col-md-4 dsb-wizard-sources-container">
                        <div class = "row dsb-wizard-sources-container">
                            <h5 class = "pull-left">{{'dataservice-new.viewTablesTitle' | translate}}</h5>
	
		                    <!-- checkbox indicating if the data sources are read-only -->
		                	<div class = "pull-right">
			                    <div class = "checkbox checkbox-primary">
				                    <input type = "checkbox"
				                           ng-model = "vm.readOnlyAccess"
				                           ng-init = "vm.readOnlyAccess">
			                        <h4 style = "display:inline">
			                            <strong translate = "editWizardService.ReadOnlyAccess" />
		                                <label class = "help-label"
		                                       style = "padding-left: 5px;">
		                                    <span class = "fa fa-info-circle"
		                                          uib-tooltip = "{{ 'editWizardService.help.readOnlyAccess' | translate }}"
		                                          tooltip-class = "custom-tooltip"
		                                          tooltip-append-to-body = "true">
		                                    </span>
		                                </label>
			                        </h4>
			                    </div>
			                </div>
			            </div>

		                <!-- Warning message when the data sources are updatable -->
                        <div class = "row toast-pf alert alert-warning"
                             ng-show = "!vm.readOnlyAccess">
                            <span class = "pficon pficon-warning-triangle-o" />
                            <span translate = "editWizardService.dataSourcesUpdatableMsg" />
                        </div>

                        <!-- Tree control to display tables / columns -->
                        <div class="tree-control-container">
                            <!-- No Content Message -->
                            <div ng-show="vm.treedata.length == 0">
                                <h4 translate="dataservice-new.noContent"></h4>
                            </div>
                            <div class="tree-control-inner-container">
                                <!-- tree control for catalog and schema -->
                                <div treecontrol="" class="tree-light tree-control-results" tree-model="vm.treedata" expanded-nodes="vm.initialExpandedNodes">
                                    <span ng-switch="" on="node.type">
                                        <span ng-switch-when="table" class="fa fa-table" aria-hidden="true"></span>
                                        <span ng-switch-when="column" class="fa fa-square" aria-hidden="true"></span>
                                    </span>
                                    {{node.name}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <p>&nbsp;</p>
                        <input type="submit" class="btn btn-primary" value="{{:: 'shared.Finish' | translate}}" ng-click="vm.finishClicked()" ng-disabled="vm.disableFinish"/>
                        <input type="button" class="btn btn-default" value="{{:: 'shared.Cancel' | translate}}" ng-click="vmmain.selectPage('dataservice-summary')" />
                    </div>
                </uib-tab>
            <uib-tabset>
       </div>

</div>