<div id="outer" class="outer-wrapper">
    <div id="dataservice-edit-container" class="container-fluid" ng-controller="DSEditController as vm">

        <!-- Modal Dialog for user to confirm moving to expert tab -->
        <div class="modal fade dsb-modal" id="confirmExpertModal" tabindex="-1" role="dialog" aria-labelledby="confirmExpertModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <span class="pficon pficon-close"></span>
                </button>
                <h4 class="modal-title" id="confirmExpertModalLabel" translate="dataservice-edit.confirmExpertTitle"></h4>
              </div>
              <div class="modal-body">{{vm.confirmExpertMsg}}</div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="vm.stayOnWizardTab()" translate="shared.Cancel"></button>
                <button type="button" class="btn btn-primary" ng-click="vm.switchToExpertTab()" translate="shared.Confirm"></button>
              </div>
            </div>
          </div>
        </div>
        <div id="dsEdit-edit-controls" ng-show="vm.svcSourcesLoading==false" class="col-md-12 row">
            <uib-tabset>
                <uib-tab heading="{{:: 'dataservice-edit.wizardTab' | translate}}" active="vm.wizardTabActive" disable="vm.disableWizardTab">
                    <dataservice-edit-wizard></dataservice-edit-wizard>
                </uib-tab>
                <uib-tab heading="{{:: 'dataservice-edit.expertTab' | translate}}" active="vm.expertTabActive" disable="vm.disableExpertTab" ng-click="vm.onExpertTabSelected()">
                    <div class="row">
                        <h4 class="pull-left">{{'dataservice-edit.viewDdlTitle' | translate}}</h4>
                    </div>
                    <div class="col-md-8">
                        <i>{{'dataservice-edit.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-edit.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="row tree-control-container">
                            <!-- No Content Message -->
                            <div ng-show="vm.treedata.length == 0">
                                <h4 translate="dataservice-edit.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>
</div>
