@if (loading) {
  <z-loader diameter="30" />
}

@if (!loading) {
  @if (inviteLoadErrorMessage) {
    <div
      class="rounded-lg border border-[var(--color-status-warning-indicator-border)] bg-[var(--color-status-warning-bg)] p-4 text-[var(--color-status-warning-fg)]"
    >
      <p class="flex items-center gap-2">
        <svg class="h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
          <path
            fill-rule="evenodd"
            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
            clip-rule="evenodd"
          />
        </svg>
        {{ 'Auth.' + inviteLoadErrorMessage | translate: { Default: inviteLoadErrorMessage } }}
      </p>
    </div>
  }

  @if (!inviteLoadErrorMessage) {
    <div class="register-header">
      <h2>
        {{
          'Auth.ACCEPT_INVITE.HEADING'
            | translate
              : {
                  organizationName: invitation?.organization?.name,
                  Default: 'Accept Invitation to ' + invitation?.organization?.name
                }
        }}
      </h2>
      <span>{{
        'Auth.ACCEPT_INVITE.SUB_HEADING'
          | translate: { email: invitation?.email, Default: 'Complete your registration ' + invitation?.email }
      }}</span>
    </div>
    <xp-accept-invite-form [invitation]="invitation" (submitForm)="submitForm($event)" />
  }
}