<div class="uk-overflow-auto">
  {{#if this.data.isRunning}}
    <div class="uk-text-center">
      <UkSpinner @ratio={{1}} />
    </div>
  {{else}}
    <UkButton
      class="uk-button uk-button-primary uk-float-right uk-margin-small-top"
      {{on "click" this.exportTable}}
    >
      {{t "caluma.analytics.preview.export"}}
    </UkButton>
    <table
      class="uk-table uk-table-divider uk-table-striped"
      id="reports-table"
    >
      <thead>
        <tr>
          {{#each this.data.value.headings as |header|}}
            <th>
              {{header.alias}}
              {{#if (not-eq header.function "VALUE")}}
                ({{header.function}})
              {{/if}}
            </th>
          {{/each}}
        </tr>
      </thead>
      <tbody>
        {{#each this.data.value.fields as |row|}}
          <tr>
            {{#each row as |entry|}}
              <td
                data-t={{this.getXLSXType entry.value}}
                data-v={{this.cleanValue entry.value}}
                class={{this.getCSSClass entry.value}}
              >
                {{entry.value}}
              </td>
            {{/each}}
          </tr>
        {{/each}}
        {{#if this.data.value.summary}}
          <tr class="uk-text-bold">
            {{#each this.data.value.summary as |summary|}}
              <td
                data-t={{this.getXLSXType summary.value}}
                data-v={{this.cleanValue summary.value}}
                class={{this.getCSSClass summary.value}}
              >
                {{summary.value}}
              </td>
            {{/each}}
          </tr>
        {{/if}}
      </tbody>
    </table>
  {{/if}}
</div>