<script setup lang="ts">
import { User } from 'src/stores/user/types';
import { baseUrl } from 'src/stores/utils';

defineProps<{
  admin?: User | null;
}>();
</script>

<template>
  <div class="col-12 row">
    <div class="col-12 q-mb-md text-weight-bold text-body1">
      <q-icon
        flat
        size="xs"
        class="q-pa-sm rounded q-mr-xs"
        color="info"
        name="mdi-map-legend"
        style="background-color: var(--surface-3)"
      />
      {{ $t(`branchAdminTitle`) }}
    </div>

    <div class="col-12">
      <template v-if="!admin">
        <span>{{ $t('branchAdminNone') }}</span>
      </template>
      <template v-else>
        <div class="row items-center">
          <q-avatar>
            <q-img
              :src="`${baseUrl}/user/${admin.id}/image`"
              style="aspect-ratio: 1"
            >
              <template #error>
                <q-img
                  :src="
                    admin.gender === 'male'
                      ? '/no-img-man.png'
                      : '/no-img-female.png'
                  "
                />
              </template>
            </q-img>
          </q-avatar>

          <div class="col column q-pl-md">
            <span>
              {{
                $i18n.locale === 'en-US'
                  ? admin.firstNameEN + ' ' + admin.lastNameEN
                  : admin.firstName + ' ' + admin.lastName
              }}
            </span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
