<div class="overlay"></div>

<div class="flex align-items-center justify-content-center pt-7">
    <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
        <div class="text-center mb-5">
            <img src="https://www.enea.it/++theme++ENEA/img/logoENEA.png" alt="Image" height="50" class="mb-3">
            <div class="text-900 text-3xl font-medium mb-3">{{ 'ACCOUNT_ACTIVATION.TITLE' | translate }}</div>
            <!--<div class="text-900 text-3xl font-medium mb-3">{{ 'REGISTER.TITLE' | translate }}</div>
            <span class="text-600 font-medium line-height-3">{{ 'REGISTER.REGISTERED' | translate }}</span>
            <a href="/login" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">{{ 'REGISTER.LOGIN_IN' | translate }}</a>-->
        </div>

        <p-messages [severity]="severity" *ngIf="errorMessages && errorMessages.length > 0">
            <ng-template pTemplate>
                <div class="p-grid">
                    <div class="col-12" *ngFor="let message of errorMessages">
                        <span class="p-message-summary">{{message.name}}:</span>
                        <span class="p-message-detail">{{message.message}}</span>
                    </div>
                </div>

            </ng-template>
        </p-messages>

        <div class="grid mt-4">
            <div class="col pb-0">
                <button
                        pButton
                        pRipple
                        class="w-full"
                        label="{{ loading ? ('ACCOUNT_ACTIVATION.ACTIVATING' | translate) : ('ACCOUNT_ACTIVATION.GO_TO_LOGIN' | translate) }}"
                        icon="pi pi-user"
                        [loading]="loading"
                        (click)="goToLoginPage()">
                </button>
            </div>
        </div>
    </div>
</div>
