@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>
        <pac-accept-invite-form
            [invitation]="invitation"
            (submitForm)="submitForm($event)"
        />
    }
}