<div class="row sql-control">
    <div class="col-sm-4">
        <div class=sql-control-control-title translate="sqlControl.instructionMsg"></div>
        <label class="help-label sql-control-query-help">
            <span class="fa fa-info-circle" uib-tooltip-html="{{:: 'sqlControl.help.sqlSearch' | translate}}"
                        tooltip-class="custom-tooltip" tooltip-placement="left-top"></span>
        </label>
        <div class="sql-control-controls-query">
            <button class="btn btn-primary" ng-click="vm.query()">
                <span class="fa fa-fw fa-search"></span>{{:: 'shared.Submit' | translate}}
            </button>
        </div>

        <div class="sql-control-editor">
            <div ui-codemirror="{ onLoad : vm.editorLoaded }"
                    ng-model="vm.queryText"
                    ui-codemirror-opts="vm.sqlEditorOptions">
            </div>
        </div>

        <div class="sql-control-controls">
            <div class="sql-control-controls-limit">
                {{:: 'sqlControl.RecordLimit' | translate}}
                <input type="number" min="-1" max="1000" step="1" ng-model="vm.limit"
                       uib-tooltip="{{:: 'sqlControl.help.recordLimit' | translate}}"/>
            </div>
            <div class="sql-control-controls-offset">
                {{:: 'sqlControl.StartingRecordIndex' | translate}}
                <input type="number" min="0" max="1000" step="1" ng-model="vm.offset"
                       uib-tooltip="{{:: 'sqlControl.help.recordOffset' | translate}}"/>
            </div>
        </div>
    </div>

    <div id="sql-control-failure" class="col-sm-8" ng-show="vm.errorMsg"
         translate="sqlControl.controlFailedMsg" translate-values="{errorMsg: vm.errorMsg}">
    </div>

    <!-- Show spinner while searching -->
    <div id="sql-search-progress-spinner" class="col-sm-4" ng-show="vm.inProgress==true">
        <div class="spinner spinner-lg spinner-inline" />
        {{:: 'sqlControl.runningSqlQuery' | translate}}
    </div>

    <div class="col-sm-8 sql-control-table" ng-show="! vm.errorMsg && vm.showResultsTable == true">
        <div ui-grid="vm.gridOptions" ui-grid-pagination class="sql-control-query-grid"></div>

        <div class="sql-control-table-help" ng-show="! vm.errorMsg && vm.showResultsTable == true">
            <label class="help-label">
                <span class="fa fa-info-circle" uib-tooltip-html="{{:: 'sqlControl.help.resultsTable' | translate}}"
                      tooltip-class="custom-tooltip" tooltip-placement="left-top"></span>
            </label>
        </div>
    </div>
</div>
