<template>
  <div>
    <div
      class="flex justify-between items-center bg-white q-pa-md q-ma-md rounded-borders"
    >
      <div class="row q-gutter-sm">
        <q-btn
          padding="xs"
          class="text-grey-7 q-mr-md"
          color="grey-3"
          icon="arrow_back"
          @click="goBack"
        />
        <div class="title text-h6">{{ pageTitle }}</div>
      </div>
      <div class="row q-gutter-sm">
        <q-btn
          v-if="isAdmin"
          color="primary"
          icon="delete"
          :label="$t('personalAccounts.delete')"
          @click="confirmDeletetionPersonalAccount"
        />
        <q-btn
          v-if="isAdmin"
          color="primary"
          icon="edit"
          :label="$t('personalAccounts.editPersonalAccount')"
          @click="editPersonalAccount"
        />
      </div>
    </div>

    <q-card
      class="no-shadow q-gutter-y-md q-mx-md no-border-radius"
      v-if="isAllowedToEnter"
    >
      <div class="q-mx-md q-pt-md q-pa-sm">
        <div class="q-gutter-y-md q-mb-md">
          <FormGeneratorWrapper
            v-if="schema"
            :model="model"
            :schema="schema"
            :hide-nulls="true"
            :padded-groups="true"
            class="q-mt-none"
          />
        </div>
      </div>
    </q-card>

    <base-tabs
      :current-tab="currentTab"
      :tabs="tabList"
      v-if="isAllowedToEnter"
    />
  </div>
</template>

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