<div>
    <!--  Selection is not JDBC -->
    <div class="row" ng-show="vm.jdbcConnectionSelected==false">
        <div class="col-md-12" >
            <h4 translate="jdbcFilterOptions.notJdbcMsg" translate-values="{connName: vm.selectedConn.keng__id}"></h4>
        </div>
    </div>
    
    <!--  Filter Option Controls -->
    <div id="connection-msg" ng-show="vm.jdbcConnectionSelected==true">
        <!-- Message -->
        <div class="row">
            <div class="col-md-12">
                <h3 translate="jdbcFilterOptions.optionMsg" translate-values="{connName: vm.selectedConn.keng__id}"></h3>
            </div>
        </div>
        <!--  -->
        <!--  -->
        <!-- Options resetting -->
        <div class="row" ng-show="vm.optionsResetting==true">
            <div class="spinner spinner-lg spinner-inline" />
            {{:: 'jdbcFilterOptions.resettingJdbcOptions' | translate}}
        </div>
        <!--  -->
        <!--  -->
        <!-- Section titles -->
        <div class="row" ng-show="vm.optionsResetting==false">
            <div class="col-md-5" ng-show="vm.supportsCatalogOrSchema">
                <h4 class="jdbc-filter-option-heading"><strong translate="shared.Schemas"></strong>
                    <label class="help-label">
                        <span class="fa fa-info-circle" uib-tooltip="{{ 'jdbcFilterOptions.help.schema' | translate }}"
                              tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                    </label>
                </h3>
            </div>
            <div class="col-md-5">
                <!-- Table Filter -->
                <h4 class="col-md-3 pull-left jdbc-filter-option-heading"><strong translate="shared.Tables"></strong>
                    <label class="help-label">
                        <span class="fa fa-info-circle" uib-tooltip="{{ 'jdbcFilterOptions.help.tables' | translate }}"
                              tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                    </label>
                </h4>
                <div class="col-sm-5">
                    <label class="help-label pull-right">
                        <span class="fa fa-info-circle" uib-tooltip="{{:: 'jdbcFilterOptions.help.filter' | translate}}"
                              tooltip-class="custom-tooltip" tooltip-append-to-body="true"></span>
                    </label>
                    <label class="jdbc-filter-font pull-right" for="jdbc-filter" translate="jdbcFilterOptions.FilterLabel"></label>
                </div>
                <div class="col-sm-4 jdbc-filter-box">
                    <input type="text" class="form-control" id="jdbc-filter" ng-model="vm.tableFilter" ng-init="vm.tableFilter" ng-change="vm.tableFilterRefresh()" >
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
        <!--  -->
        <!--  -->
        <div class="row" ng-show="vm.optionsResetting==false">
            <!-- Catalog-Schema Tree Control -->
            <div class="tree-control-container col-md-5" ng-show="vm.supportsCatalogOrSchema">
                <!-- Spinner when loading -->
                <div ng-show="vm.treeLoading==true">
                    <div class="spinner spinner-lg" />
                </div>
                <!-- No Content Message -->
                <div ng-show="vm.treeLoading==false && vm.treedata.length == 0 && !vm.hasTreeFetchError">
                    <h4 translate="jdbcFilterOptions.noContent"></h4>
                </div>
                <!-- Fetch Content Error Message -->
                <div ng-show="vm.treeLoading==false && vm.hasTreeFetchError">
                    <h4>{{vm.treeFetchErrorMsg}}</h4>
                </div>
                <div class="tree-control-inner-container" ng-show="vm.treeLoading==false">
                    <!-- tree control for catalog and schema -->
                    <div treecontrol="" class="tree-classic tree-control-results" tree-model="vm.treedata" expanded-nodes="vm.initialExpandedNodes" selected-node="vm.initialNodeSelection" on-selection="vm.setTreeSelection(node,selected)">
                        {{node.name}}
                    </div>
                </div>
            </div>
            <!--  -->
            <!--  -->
            <!-- Table display area -->
            <div class="col-md-5">
                <!-- The table name pick list -->
                <div class="filter-list-container">
                    <!-- spinner while updating -->
                    <div id="tableList-updating" ng-show="vm.tablesLoading==true" class="col-md-10 row">
                        <div class="spinner spinner-lg" />
                    </div>
                    <!-- No Tables Message -->
                   <div id="tableList-updating" ng-show="vm.tablesLoading==false && vm.tables.length == 0 && !vm.hasTableFetchError" class="col-md-10 row">
                        <h4 translate="jdbcFilterOptions.noTables"></h4>
                    </div>
                    <!-- Fetch Table Error Message -->
                    <div id="tableList-updating" ng-show="vm.tablesLoading==false && vm.hasTableFetchError" class="col-md-10 row">
                        <h4>{{vm.tableFetchErrorMsg}}</h4>
                    </div>
                    <!--  Results -->
                    <div class="filter-list-results">
                        <div id="tableNameList-table-row" class="list-view-container" ng-show="vm.tablesLoading==false && vm.tables.length>0 && !vm.hasTableFetchError">
                            <div pf-list-view config="vm.listConfig" items="vm.tables">
                                <div class="list-view-pf-description">
                                    <div class="list-group-item-heading">
                                    {{item}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
