<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('personalAccounts.personnelFilesRegirtry') }}
      </div>
      <div class="q-gutter-sm">
        <q-btn
          v-if="isAdmin"
          color="primary"
          icon="delete"
          :label="$t('personalAccounts.delete')"
          :disable="!selected.length"
          @click="confirmDeletetionPersonalAccounts"
        />
        <q-btn
          v-if="isAdmin"
          color="primary"
          icon="create"
          :label="$t('personalAccounts.createPersonalAccount')"
          @click="createPerson"
        />
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        selection="multiple"
        v-model="model.search"
        :columns="columns"
        :data="model.personalAccounts"
        :loading="model.loading"
        :pagination.sync="model.pagination"
        :visible-columns="visibleColumns"
        :rows-per-page-options="[10, 20, 50, 100]"
        :selected.sync="selected"
        :title="$t('personalAccounts.title')"
        :save-query="true"
        @requestTable="requestTable"
      >
        <template #search>
          <personal-accounts-search-bar
            :table-model.sync="model"
            @update:table-model="fetch"
          />
        </template>
        
        <template #body-item-birthday="{ row }">
          {{ formatBirthdayDate(row.birthday) }}
        </template>
      </BaseTable>
    </div>
  </div>
</template>

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