@if (user(); as currentUser) {
<section class="mx-auto max-w-2xl px-6 py-12">
  <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100" i18n="@@profile.heading">
    My profile
  </h1>
  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400" i18n="@@profile.intro">
    Identity served by the BFF from the active session.
  </p>

  <dl
    class="mt-8 grid grid-cols-1 gap-4 rounded-lg border border-gray-200 bg-white p-6 sm:grid-cols-2 dark:border-gray-800 dark:bg-gray-900"
  >
    <div>
      <dt
        class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
        i18n="@@profile.field.displayName"
      >
        Display name
      </dt>
      <dd
        class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100"
        data-testid="profile-displayname"
      >
        {{ currentUser.displayName }}
      </dd>
    </div>
    <div>
      <dt
        class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
        i18n="@@profile.field.username"
      >
        Username
      </dt>
      <dd
        class="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100"
        data-testid="profile-username"
      >
        {{ currentUser.username }}
      </dd>
    </div>
    <div>
      <dt
        class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
        i18n="@@profile.field.oid"
      >
        Entra object id
      </dt>
      <dd
        class="mt-1 break-all font-mono text-xs text-gray-700 dark:text-gray-300"
        data-testid="profile-oid"
      >
        {{ currentUser.oid }}
      </dd>
    </div>
    <div>
      <dt
        class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
        i18n="@@profile.field.tid"
      >
        Tenant id
      </dt>
      <dd
        class="mt-1 break-all font-mono text-xs text-gray-700 dark:text-gray-300"
        data-testid="profile-tid"
      >
        {{ currentUser.tid }}
      </dd>
    </div>
  </dl>
</section>
}