<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <q-btn
        padding="xs"
        class="text-grey-7 q-mr-md"
        color="grey-3"
        icon="arrow_back"
        @click="goToReports"
      />
      <div
        class="column justify-center text-h5 q-mr-auto"
        style="min-height: 36px"
      >
        {{ $t('reports.reports') }}
      </div>
      <q-btn color="primary" :loading="isCreating" @click="create = true">
        <report-create
          v-if="create"
          v-model="create"
          :base-report="baseReport"
          @creating="creating"
        />
        {{ $t('reports.create') }}
      </q-btn>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :columns="columns"
        :data="model.records"
        :loading="model.loading"
        :wrap-cells="true"
        _title="$t('reports.myStatements')"
        :pagination.sync="model.pagination"
        :visible-columns="visibleColumns"
        @requestTable="init"
        @update="init"
      >
        <template #search>
          <reports-search-bar
            :query="searchQuery"
            :base-report="baseReport"
            @query="fetch"
          />
        </template>

        <template #body-item-download="props">
          <q-btn
            v-if="props.value && props.value.length"
            flat
            dense
            icon="arrow_downward"
            size="16"
            style="color: rgba(0, 0, 0, 0.54)"
            color="primary"
            @click="download(props.value)"
          >
            <q-tooltip>
              {{ $t('reports.columns.downloadSingle') }}
            </q-tooltip>
          </q-btn>
        </template>

        <template #top>
          <div class="row q-my-md">
            <div class="q-table__control">
              <div class="q-table__title">
                {{ title }}
              </div>
            </div>
            <q-space />
            <div class="row q-gutter-x-md">
              <div v-if="!model.loading" class="flex items-center">
                <div>
                  {{ $t('reports.toggle.auto') }}
                </div>
                <q-toggle
                  v-model="model.auto"
                  :false-value="true"
                  :true-value="false"
                  class="no-box-shadow"
                  name="music_active"
                />
                <div>
                  {{ $t('reports.toggle.manual') }}
                </div>
              </div>
              <q-btn-group flat>
                <q-btn
                  :loading="model.loading"
                  color="primary"
                  flat
                  icon="refresh"
                  @click="init"
                >
                  <template #loading>
                    <q-spinner-gears />
                  </template>
                </q-btn>
              </q-btn-group>
            </div>
          </div>
        </template>
      </BaseTable>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>
