<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('statementDrafts.label') }}
      </div>
      <div v-if="showPersonalReception" class="flex justify-end">
        <q-btn
          @click="goTo('statements-create')"
          color="primary"
          icon="create"
          label="Очный приём"
          class="q-ml-sm"
        />
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        class="statements-index-table"
        :only-my.sync="model.onlyMy"
        showToggleMy
        :columns="columns"
        :data="model.records"
        :loading="model.loading"
        :title="$t('statementDrafts.myStatementDrafts')"
        :pagination.sync="model.pagination"
        :visible-columns="model.visibleColumns"
        @requestTable="init"
        @update="init"
        @changeToggleMy="resetPagination"
        saveQuery
      />
    </div>
  </div>
</template>

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

<style lang="scss">
  .statements-index-table {
    .q-table th,
    .q-table td {
      padding: {
        left: 10px;
        right: 10px;
      }

      &:first-child {
        padding: {
          left: 16px;
        }
      }

      &:last-child {
        padding: {
          right: 16px;
        }
      }
    }

    .q-table th {
      padding: {
        top: 8px;
        bottom: 8px;
      }
    }

    .q-table td {
      padding: {
        top: 6px;
        bottom: 6px;
      }
    }
  }
</style>
