<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">
        {{ $t('criteriaDirectory.label') }}
      </div>
      <div class="q-gutter-sm">
        <q-btn
          color="primary"
          icon="create"
          :label="$t('criteriaDirectory.create')"
          @click="startCreate"
          v-if="$AC.haveScope(USER_SCOPES.SOCIAL_DICTIONARY_ADMIN)"
        />
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :columns="columns"
        :data="data"
        :loading="loading"
        :pagination.sync="pagination"
        :title="$t('criteriaDirectory.label')"
        :visible-columns="model.visibleColumns"
        @requestTable="init"
        @update="init"
        saveQuery
      >
        <template v-slot:body-item-delete="props">
          <q-btn
            v-if="$AC.haveScope(USER_SCOPES.SOCIAL_DICTIONARY_ADMIN)"
            flat
            dense
            icon="delete"
            size="16"
            style="color: rgba(193, 0, 21, 1)"
            @click="startDelete(props.row.id)"
          >
            <q-tooltip>
              {{ $t('criteriaDirectory.delete') }}
            </q-tooltip>
          </q-btn>
        </template>
      </BaseTable>
      <div></div>
    </div>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
