<div class="blade-content blade-content __xxlarge-wide">
  <div class="blade-inner">
    <div class="inner-block">

      <!-- Description -->
      <div class="report-description" ng-if="blade.currentEntity.description">
        <i class="fa fa-info-circle"></i>
        <span>{{ blade.currentEntity.description }}</span>
      </div>

      <!-- Test Results Panel -->
      <div class="test-results-panel">

        <!-- Parameter Values for Testing -->
        <div class="test-parameters" ng-if="blade.testParameters.length">
          <div class="test-parameters-header" ng-click="blade.testParamsCollapsed = !blade.testParamsCollapsed">
            <i class="fa" ng-class="blade.testParamsCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'"></i>
            <span>{{ 'sql-queries.blades.report-view.labels.test-parameters' | translate }} ({{ blade.testParameters.length }})</span>
          </div>
          <div class="test-parameters-grid" ng-show="!blade.testParamsCollapsed">
            <div class="test-param-item" ng-repeat="param in blade.testParameters">
              <label class="test-param-label">{{ param.name }} <span class="test-param-type">{{ param.type }}</span></label>
              <div class="form-input" ng-class="{ '__number': param.type === 'Integer' || param.type === 'Decimal', '__calendar': param.type === 'DateTime' }">
                <input class="form-control" ng-model="param.value" ng-if="param.type === 'ShortText'" placeholder="{{ param.name }}" />
                <input smart-float num-type="integer" class="form-control" ng-model="param.value" ng-if="param.type === 'Integer'" placeholder="0" />
                <input smart-float fraction="4" num-type="float" class="form-control" ng-model="param.value" ng-if="param.type === 'Decimal'" placeholder="0.0" />
                <input datepicker-popup is-open="blade.testDatepickers[param.name]" class="form-control" ng-model="param.value" ng-if="param.type === 'DateTime'" />
                <button ng-click="blade.openTestDatepicker($event, param.name)" type="button" class="btn" ng-if="param.type === 'DateTime'">
                  <i class="btn-ico fa fa-calendar"></i>
                </button>
                <label class="form-label __switch" ng-if="param.type === 'Boolean'">
                  <input type="checkbox" ng-model="param.value">
                  <span class="switch"></span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Max Rows + Run Button + Metadata -->
        <div class="test-controls">
          <div class="form-group test-max-rows">
            <label class="form-label">{{ 'sql-queries.blades.report-view.labels.max-rows' | translate }}</label>
            <div class="form-input __number">
              <input smart-float num-type="integer" class="form-control" ng-model="blade.testMaxRows" style="width: 80px;" />
            </div>
          </div>
          <button class="btn btn-primary" ng-click="runTestQuery()" ng-disabled="blade.testLoading">
            <i class="fa" ng-class="blade.testLoading ? 'fa-spinner fa-spin' : 'fa-play'"></i>&nbsp;
            {{ (blade.testLoading ? 'sql-queries.blades.report-view.labels.executing' : 'sql-queries.blades.report-view.labels.run') | translate }}
          </button>
          <span class="test-metadata" ng-if="blade.testResults && !blade.testLoading">
            {{ 'sql-queries.blades.report-view.labels.rows-returned' | translate }}: {{ blade.testResults.rows.length }}
            <span ng-if="blade.testResults.isTruncated"> ({{ 'sql-queries.blades.report-view.labels.truncated' | translate }})</span>
            <span class="test-metadata-separator">|</span>
            {{ 'sql-queries.blades.report-view.labels.execution-time' | translate }}: {{ blade.testResults.executionTimeMs }} ms
          </span>
          <span class="export-inline" ng-if="blade.exportFormats.length">
            <select class="form-control export-format-select" ng-model="blade.exportFormat" ng-options="f for f in blade.exportFormats"></select>
            <button class="btn btn-primary" ng-click="exportReport()" ng-disabled="blade.exportLoading || !blade.exportFormat">
              <i class="fa" ng-class="blade.exportLoading ? 'fa-spinner fa-spin' : 'fa-download'"></i>&nbsp;
              {{ 'sql-queries.blades.report-view.labels.export' | translate }}
            </button>
          </span>
        </div>

        <!-- Error -->
        <div class="test-error" ng-if="blade.testError">
          <i class="fa fa-exclamation-triangle"></i>
          <span>{{ blade.testError }}</span>
        </div>

        <!-- Results Grid -->
        <div class="test-results-grid" ng-if="blade.testResults && blade.testResults.rows.length && !blade.testLoading">
          <div ui-grid="blade.testGridOptions" ui-grid-auto-resize ui-grid-resize-columns></div>
        </div>

        <!-- No Results -->
        <div class="test-no-results" ng-if="blade.testResults && !blade.testResults.rows.length && !blade.testLoading && !blade.testError">
          <p>{{ 'sql-queries.blades.report-view.labels.no-results' | translate }}</p>
        </div>
      </div>
    </div>
  </div>
</div>
