<template>
  <div>
    <LayoutCommonSection>
      <div class="explanation">
        <div class="px-4 d-flex flex-row align-center justify-center py-2">
          <v-icon class="theme-info">fa fa-info</v-icon>
        </div>
        <div class="px-2 d-flex flex-row align-center justify-center">
          {{ $t('super_admin_explanation_text') }}
        </div>
      </div>

      <UiFormEdition :id="accessProfile.id" :model="AdminAccess" class="w-100">
        <template #default="{ entity: adminAccess }">
          <div v-if="adminAccess">
            <v-table class="mb-4">
              <tbody>
                <tr>
                  <td>{{ $t('username') }} :</td>
                  <td>
                    <b>{{ adminAccess.username }}</b>
                  </td>
                </tr>
              </tbody>
            </v-table>

            <UiInputEmail
              v-model="adminAccess.email"
              field="email"
              label="associated_email"
              class="mx-4"
            />
          </div>
        </template>
      </UiFormEdition>
    </LayoutCommonSection>
  </div>
</template>

<script setup lang="ts">
import { useAccessProfileStore } from '~/stores/accessProfile'
import AdminAccess from '~/models/Access/AdminAccess'

definePageMeta({
  name: 'parameters_super_admin_page',
})

const accessProfile = useAccessProfileStore()
if (accessProfile.id === null) {
  throw new Error('Missing access profile id')
}
</script>

<style scoped lang="scss">
.v-table td:first-child {
  width: 180px;
}
</style>
