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

        <!--
          -- Deployment
          -->
        <!-- Show spinner while deploying -->
        <div id="deployment-spinner" ng-show="vm.dsDeploymentInProgress==true" class="col-md-10 row">
            <div class="spinner spinner-lg spinner-inline" />
            {{:: 'dataservice-test.deployingDataService' | translate}}
        </div>
        
        <!-- Deployment failure -->
        <div id="deployment-failure" ng-show="vm.dsDeploymentInProgress==false && vm.dsDeploymentSuccess==false">
            <!-- Error message when the vdb fails to activate -->
            <div class = "row toast-pf alert alert-danger">
                <span class = "pficon pficon-error-circle-o" />
                <span translate = "dataservice-test.dataServiceDeploymentFailedMessage" />
            </div>
            <h4><strong>ERROR : <em>{{vm.dsDeploymentMessage}}</em></strong></h4>
        </div>
        

	    <div id="deployed-test-search-tabs" ng-show="vm.dsDeploymentInProgress==false && vm.dsDeploymentSuccess==true">
	        <uib-tabset>
	        <uib-tab heading="{{:: 'dataservice-test.OData' | translate}}" ng-click="vm.onTabSelected('Standard')">

	            <!--
	                -- OData Querying
	                -->
	            <div id="odata-endpoint-url" class="row col-sm-8" ng-show="vm.hasOdataAttributes() == true" ng-cloak>
	                <label class="control-label col-sm-1" for="test-page-url-path" translate="dataservice-test.urlPath"></label>
                    <label class="help-label col-sm-1">
                        <span class="fa fa-info-circle" uib-tooltip-html="{{ 'dataservice-test.help.endpointSubmit' | translate }}"
                              tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                    </label>
	                <input id="test-page-url-path" type="text" readonly="true" value="{{vm.endPointUrl()}}" class="col-sm-11">
	            </div>

	            <div id="odata-query-button" class="row col-sm-1" ng-show="vm.hasOdataAttributes() == true" ng-cloak>
	                <button class="btn btn-primary" type="button" class="col-sm-11" title="Search"
	                            ng-click="vm.onSearchEndPoint()" ng-disabled="! vm.canQuery()" translate="dataservice-test.runQueryAction">
	                    <span class="fa fa-fw fa-search"></span>
	                </button>
	            </div>

	            <div id="odata-control-panel" class="col-sm-4" ng-show="vm.hasOdataAttributes() == true" ng-cloak>
	                <uib-accordion close-others="false">
	                    <!-- -->
	                    <!-- -->
	                    <!-- Select Group -->
	                    <!-- -->
	                    <!-- -->
	                    <uib-accordion-group heading=":: dataservice-test.Select | translate" ng-init="selectIsOpen = true" is-open="selectIsOpen">
	                        <uib-accordion-heading>
	                            <div class="pull-left odata-control-panel-title" translate="dataservice-test.Select"></div>
	                            <!-- Necessary to make it into a uib-dropdown as they do not refresh the page when clicked -->
	                            <div class="pull-left odata-control-panel-title-help" uib-dropdown>
                                    <label class="help-label">
	                                    <span class="fa fa-info-circle" uib-tooltip-html="{{ 'dataservice-test.help.select' | translate }}"
	                                              tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                                    </label>
	                            </div>
	                        </uib-accordion-heading>
	                        <form name="odata-exp-select" role="form">
	                            <div class="odata-exp-select-group">
	                                <div class="col-xs-7">
	                                    <ui-select ng-model="vm.odata.entity" theme="bootstrap" title=":: dataservice-test.selectViewMsg | translate">
	                                        <ui-select-match placeholder="{{:: 'dataservice-test.selectViewPlaceholder' | translate}}">{{$select.selected.name}}</ui-select-match>
	                                        <ui-select-choices repeat="entity in vm.odata.entities">
	                                            <div ng-bind-html="entity.name | highlight: $select.search"></div>
	                                        </ui-select-choices>
	                                    </ui-select>
	                                </div>

	                                <div class="col-xs-5">
	                                    <ui-select ng-model="vm.odata.limit" theme="bootstrap" title=":: dataservice-test.selectResultLimitMsg | translate">
	                                        <ui-select-match placeholder="{{:: 'dataservice-test.resultLimitPlaceholder' | translate}}">{{$select.selected}}</ui-select-match>
	                                        <ui-select-choices repeat="limit in vm.odata.limits">
	                                            <div ng-bind-html="limit | highlight: $select.search"></div>
	                                        </ui-select-choices>
	                                    </ui-select>
	                                </div>
	                            </div>
	                        </form>
	                    </uib-accordion-group>
	                    <!-- -->
	                    <!-- -->
	                    <!-- Column Group -->
	                    <!-- -->
	                    <!-- -->
	                    <uib-accordion-group heading=":: dataservice-test.Columns | translate">
	                        <uib-accordion-heading>
	                            <div class="pull-left odata-control-panel-title" translate="dataservice-test.Columns"></div>
	                            <!-- Necessary to make it into a uib-dropdown as they do not refresh the page when clicked -->
	                            <div class="pull-left odata-control-panel-title-help" uib-dropdown>
	                                <label class="help-label">
	                                        <span class="fa fa-info-circle" uib-tooltip="{{ 'dataservice-test.help.columns' | translate }}"
	                                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
	                                </label>
	                            </div>
	                        </uib-accordion-heading>
	                        <form name="odata-exp-columns" role="form">
	                            <div class="form-group odata-exp-column-group" ng-repeat="column in vm.odata.columns()">
	                                <div class="odata-exp-column-group-row checkbox">
	                                    <label>
	                                        <input type="checkbox" value=""
	                                                    ng-checked="vm.isColumnSelected(column.name)"
	                                                    ng-click="vm.updateColumnSelection($event, column.name)">{{column.name}}
	                                    </label>
	                                </div>
	                            </div>
	                        </form>
	                    </uib-accordion-group>
	                    <!-- -->
	                    <!-- -->
	                    <!-- Where Group -->
	                    <!-- -->
	                    <!-- -->
	                    <uib-accordion-group heading=":: dataservice-test.Where | translate" is-open="vm.odata.hasWhere">
	                        <uib-accordion-heading>
	                            <div class="pull-left odata-control-panel-title" translate="dataservice-test.Where"></div>
	                            <!-- Necessary to make it into a uib-dropdown as they do not refresh the page when clicked -->
	                            <div class="pull-left odata-control-panel-title-help" uib-dropdown>
	                              	<label class="help-label">
	                                        <span class="fa fa-info-circle" uib-tooltip-html="{{ 'dataservice-test.help.where' | translate }}"
	                                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
	                                </label>
	                            </div>
	                        </uib-accordion-heading>
	                        <form name="odata-exp-where" role="form">
	                            <div class="form-group odata-exp-where-group" ng-repeat="where in vm.odata.where">
	                                <div class="col-xs-4 odata-exp-where-group-row">
	                                    <ui-select ng-model="where.column" theme="bootstrap" on-select="vm.onWhereColumnSelected($item, where)">
	                                        <ui-select-match placeholder="{{:: 'dataservice-test.columnPlaceholder' | translate}}">{{$select.selected.name}}</ui-select-match>
	                                        <ui-select-choices repeat="column in vm.odata.columns()">
	                                            <div ng-bind-html="column.name | highlight: $select.search"></div>
	                                        </ui-select-choices>
	                                    </ui-select>
	                                </div>
	                                <div class="col-xs-4 odata-exp-where-group-row" ng-show="! where.error">
	                                    <ui-select ng-model="where.condition" theme="bootstrap">
	                                        <ui-select-match placeholder="{{:: 'dataservice-test.conditionPlaceholder' | translate}}">{{$select.selected}}</ui-select-match>
	                                        <ui-select-choices repeat="condition in vm.whereConditions(where)">
	                                            <div ng-bind-html="condition | highlight: $select.search"></div>
	                                        </ui-select-choices>
	                                    </ui-select>
	                                </div>
	                                <div class="col-xs-3 odata-exp-where-group-row" ng-show="! where.error">
	                                    <input type="text" class="odata-form-control" ng-model="where.value" name="value" placeholder="{{:: 'dataservice-test.valuePlaceholder' | translate}}" />
	                                </div>
	                                <div id="odata-exp-where-group-buttons" class="col-xs-1 odata-exp-where-group-row">
	                                    <button type="button" class="odata-form-where-remove-btn" ng-click="vm.onRemoveWhereClicked($event, where)">
	                                        <span class="glyphicon glyphicon-minus"></span>
	                                    </button>
                                        <button type="button" class="odata-form-where-add-btn" ng-click="vm.onAddWhereClicked($event)">
                                            <span class="glyphicon glyphicon-plus"></span>
                                        </button>
                                    </div>

	                                <div class="odata-exp-where-error-msg">
	                                    {{where.error}}
	                                </div>
	                            </div>

	                        </form>
	                    </uib-accordion-group>
	                    <!-- -->
	                    <!-- -->
	                    <!-- Order by Group -->
	                    <!-- -->
	                    <!-- -->
	                    <uib-accordion-group heading="Order by">
	                        <uib-accordion-heading>
	                            <div class="pull-left odata-control-panel-title">Order by</div>
	                            <!-- Necessary to make it into a uib-dropdown as they do not refresh the page when clicked -->
	                            <div class="pull-left odata-control-panel-title-help" uib-dropdown>
	                                <label class="help-label">
	                                        <span class="fa fa-info-circle" uib-tooltip="{{ 'dataservice-test.help.orderBy' | translate }}"
	                                                  tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
	                                </label>
	                            </div>
	                        </uib-accordion-heading>
	                        <form name="odata-exp-order-by" role="form">
	                            <div class="form-group odata-exp-order-by-group" ng-repeat="column in vm.odata.columns()">
	                                <div class="odata-exp-order-by-group-row form-group">
	                                    <div class='odata-exp-order-by-group-row-label radio-inline'>
	                                        <label>{{column.name}}</label>
	                                    </div>
	                                    <label class="radio-inline">
	                                        <input type="radio" name="{{column}}-sort-option" value=""
	                                                    ng-model="column.sort">
	                                        {{:: 'dataservice-test.NoSortChoice' | translate}}
	                                    </label>
	                                    <label class="radio-inline">
	                                        <input type="radio" name="{{column}}-sort-option" value="asc"
	                                                    ng-model="column.sort">
	                                        {{:: 'dataservice-test.AscendingChoice' | translate}}
	                                    </label>
	                                    <label class="radio-inline">
	                                        <input type="radio" name="{{column}}-sort-option" value="desc"
	                                                    ng-model="column.sort">
	                                        {{:: 'dataservice-test.DescendingChoice' | translate}}
	                                    </label>
	                                </div>
	                            </div>
	                        </form>
	                    </uib-accordion-group>
	                </uib-accordion>
	            </div>

                <div class="col-sm-8" ng-show="vm.hasOdataAttributes() == true && vm.showResultsTable == true" ng-cloak>
                    <div id="odata-results-type">
                        <label class="radio-inline">
                            <input type="radio" name="odata-results-type-tabular" value="Tabular"
                                    ng-model="vm.resultsType">
                                    {{:: 'dataservice-test.resultsTabular' | translate}}
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="odata-results-type-raw" value="Raw"
                                    ng-model="vm.resultsType">
                                    {{:: 'dataservice-test.resultsRaw' | translate}}
                        </label>
                    </div>
                    <div id="odata-results-table" ng-show="vm.resultsType == 'Tabular'">
                        <div ui-grid="vm.resultGridOptions" ui-grid-pagination class="odata-results-table-grid"></div>
                    </div>
                    <div id="odata-results-raw" ng-show="vm.resultsType =='Raw'" ui-codemirror="{ onLoad : vm.odata.rawEditorLoaded }"
                            ng-model="vm.rawResults" ui-codemirror-opts="vm.odata.rawResultsOptions">
                    </div>
                </div>

	            <div id="odata-results-msg" class="col-sm-8" ng-show="vm.hasOdataAttributes() == true && vm.searchMsg != null" ng-cloak>
	                <h3>{{vm.searchMsg}}</h3>
	            </div>

	            <!-- Show spinner while searching -->
	            <div id="odata-search-progress-spinner" class="col-md-8" ng-show="vm.searchInProgress==true">
                    <div class="spinner spinner-lg spinner-inline" />
                    {{:: 'dataservice-test.runningOdataQuery' | translate}}
	            </div>

	            <div id="odata-metadata-fetch-failure" class="col-sm-12"
	                    ng-show="vm.dsDeploymentInProgress == false && vm.hasOdataAttributes() == false && vm.odate.metadataFailure == true" ng-cloak>
	                <h3>Failed to get the odata metadata for the deployed artifact.</h3>
	            </div>
	        </uib-tab>

	        <uib-tab heading="{{:: 'dataservice-test.SQL' | translate}}"  ng-click="vm.onTabSelected('Advanced')">
	         
               <div id="deployment-spinner" ng-show="vm.pinging == true" class="col-md-10 row">
                   <div class="spinner spinner-lg spinner-inline" />
                   {{:: 'dataservice-test.testingJdbcConnection' | translate}}
               </div>

	           <div class="col-sm-12" ng-show="vm.pinging == false && vm.pinged == false">
	               <span class="col-sm-12 row">&nbsp;</span>
	               <span class="col-sm-12 row">&nbsp;</span>
	               <span class="col-sm-12 row">&nbsp;</span>
 	          	   <span ng-class="vm.pingJdbcResultStyleClass" style="font-size:1.75em"></span>
    	           <span class="teiid-pref-pingResult">{{vm.jdbcPingResult}}</span>
        		</div>
	            <div class="row"  ng-show="vm.pinged == true">
	                <div class="col-sm-12">
	                    <div id="ds-test-sql-edit-box">
	                        <sql-control editor-height="20em"
                                            target="{{vmmain.selectedDataservice().keng__dataPath}}"
                                            query-text="{{vm.selectedDataserviceQueryText()}}"
                                            refresh="vm.sql.refreshEditor">
	                        </sql-control>
	                </div>
	             </div>
	            </div>
	        </uib-tab>
	        </uib-tabset>
	    </div>
	</div>
</div>
