<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">{{ '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="warn" *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="field grid">
            <label for="email" class="block text-900 font-medium col-12 md:col-3"

            >{{ 'REGISTER.EMAIL' | translate }}*</label>
             <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.email" #emailInput id="email" type="text" pInputText class="w-full" (change)="emailInput" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

        <div class="field grid">
            <label for="firstName"
                   class="block text-900 font-medium col-12 md:col-3"
            >{{ 'REGISTER.NAME' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.name" id="firstName" type="text" pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}"/>
            </div>
        </div>

        <div class="field grid">
            <label for="lastName" class="block text-900 font-medium col-12 md:col-3"
            >{{ 'REGISTER.SURNAME' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.surname" id="lastName" type="text" pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

        <div class="field grid">
            <label for="organization" class="block text-900 font-medium col-12 md:col-3">{{ 'REGISTER.ORGANIZATION' | translate }}</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.organization" id="organization" type="text" pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

        <div class="field grid">
            <label for="password" class="block text-900 font-medium col-12 md:col-3"
            >{{ 'REGISTER.PASSWORD' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.password" id="password" type="password" pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

        <div class="field grid">
            <label for="repeatPassword" class="block text-900 font-medium col-12 md:col-3"
            >{{ 'REGISTER.REPEAT_PASSWORD' | translate }}*</label>

            <div class="col-12 md:col-9">
                <input [(ngModel)]="model!.passwordRepeat" id="repeatPassword" type="password" pInputText class="w-full" placeholder="{{'INPUT.PLACEHOLDER' | translate}}" />
            </div>
        </div>

        <div class="field p-fluid grid">
            <div class="col-12 md:col-3">
                <button type="button" pButton pRipple class="p-button-text" icon="pi pi-plus-circle" label="{{'REGISTER.ADD_COMMUNITY' | translate}}" (click)="getCommunities(); menu.toggle($event)"></button>
                <p-menu #menu [popup]="true" [model]="communities"></p-menu>
            </div>
            <div class="col-12 md:col-9">
                <ng-container *ngIf="model && model!.usercommunities && model!.usercommunities.length > 0">
                    <div class="field grid" *ngFor="let community of model.usercommunities; let i = index;">
                        <label class="block text-900 font-medium col-12 md:col-4">
                            {{ community.description }}
                        </label>

                        <div class="col-12 md:col-8">
                            <div class="grid">
                                <div class="col-10">
                                    <input [(ngModel)]="community.wallet" type="text" pInputText class="w-full" placeholder="{{ 'REGISTER.WALLET_PLACEHOLDER' | translate }}"/>
                                </div>
                                <div class="col-2">
                                    <button (click)="model.usercommunities.splice(i, 1)"  pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-button-sm"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>

        <div class="grid mt-4">
            <div class="col pb-0">
                <button
                        pButton
                        pRipple
                        class="w-full"
                        label="{{ 'REGISTER.ACTION' | translate }}"
                        icon="pi pi-user"
                        [loading]="loading"
                        (click)="register()">
                </button>
            </div>
        </div>
    </div>
</div>
