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


<div *ngIf="local"  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">-->
            <img src="assets/images/home/logo_blue.png" alt="Image" height="50" class="mb-3">
            <div class="text-900 text-3xl font-medium mb-3">{{ 'LOGIN.TITLE' | translate }}</div>
            <span class="text-600 font-medium line-height-3">{{ 'LOGIN.DONT_HAVE_AN_ACCOUNT' | translate }}</span>
            <a href="register" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">{{ 'LOGIN.CREATE_NOW' | translate }}</a>
        </div>
    
        <div>
            <label for="email" class="block text-900 font-medium mb-2">{{ 'LOGIN.EMAIL' | translate }}</label>
            <input [(ngModel)]="username" id="email" type="text" pInputText class="w-full mb-3" />

            <label for="password" class="block text-900 font-medium mb-2">{{ 'LOGIN.PASSWORD' | translate }}</label>
            <input [(ngModel)]="password" id="password" type="password" pInputText class="w-full mb-3" />

            <div class="flex align-items-center justify-content-between mb-6">
                <div class="flex align-items-center">
                    <p-checkbox id="rememberme" [binary]="true" styleClass="mr-2"></p-checkbox>
                    <label for="rememberme">{{ 'LOGIN.REMEMBER_ME' | translate }}</label>
                </div>
                <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">{{ 'LOGIN.FORGOT_YOUR_PASSWORD' | translate }}</a>
            </div>

            <button (click)="login()" pButton pRipple [loading]="loading" label="{{ 'LOGIN.SIGN_IN' | translate }}" icon="pi pi-user" class="w-full"></button>
        </div>
    </div>
</div>