<div class="profile">
	<div class="container-fluid">
		<div *ngIf="user | async  as userProfile; else loading" class="user-profile">
			<div class="col user-profile-title">{{'USER-DIALOG.USER-PROFILE' | translate}}</div>
			<div class="row profile-content" [formGroup]="formGroup">
				<div class="col">
					<div class="row mb-4">
						<div class="col-auto">
							<img mat-card-avatar class="avatar" [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)">
							<!-- <div class="row justify-content-center camera">
								<span class="material-icons-two-tone">photo_camera</span>
							</div> -->
						</div>
						<div class="col-auto d-flex flex-column justify-content-center main-info">
							<div class="name">{{formGroup.get('name').value}}</div>
							<!-- <div><span class="connected">{{'USER-PROFILE.SETTINGS.CONNECTED-WITH' | translate}}: </span><span class="mail">{{userProfile.email}}</span></div> -->
						</div>
					</div>
					<!-- Name -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}} *</div>
							</div>
							<div class="row">
								<div class="col name-form">
									<mat-form-field>
										<input matInput type="text" name="name" placeholder="{{'USER-PROFILE.SETTINGS.NAME' | translate}}" [formControl]="formGroup.get('name')" required>
										<!-- <mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error> -->
										<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
									</mat-form-field>
								</div>
							</div>
						</div>
					</div>
					<!-- Accounts -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ACCOUNTS' | translate}}</div>
							</div>
							<div class="row mt-3">
								<div class="col-auto">
									<span class="email-title">{{'USER-PROFILE.SETTINGS.EMAILS' | translate}}</span>
								</div>
								<div class="col-auto vertical-line">
									<div *ngIf="userCredentials">
										<div *ngFor="let userCredential of userCredentials">
											<div class="row user-credential">
												<!-- <div class="col-auto pl-4 ml-2 pr-0 d-flex align-items-center"><mat-icon class="check-icon mat-icon">check</mat-icon></div> -->
												<div class="col-auto mail-text pr-0">{{userCredential.email}}</div>
												<span *ngIf="userCredential.provider === authProviderEnum.Google" class="googleIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.Facebook" class="facebookIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.Twitter" class="twitterIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.LinkedIn" class="linkedInIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.B2Access" class="b2AccessIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.ORCID" class="orcidIconMedium"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.OpenAire" class="openaireIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.Configurable" class="configurableIcon"></span>
												<span *ngIf="userCredential.provider === authProviderEnum.Zenodo" class="zenodoIcon"></span>
												<!-- <div class="col-auto"></div>
												<div class="col-auto d-flex align-items-center" (click)="removeAccount()"><mat-icon class="clear-icon mat-icon">clear</mat-icon></div> -->
											</div>
										</div>
									</div>
									<div class="row add-new-btn">
										<div class="col-auto add-mail" (click)="addAccount()">
											<mat-icon class="mr-1">add</mat-icon>
											<span>{{'USER-PROFILE.ACTIONS.LINK-NEW' | translate}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- Organization -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div>
							</div>
							<div class="row">
								<div class="col organization-form">
									<mat-form-field>
										<app-single-auto-complete placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('organization')" [configuration]="organisationsAutoCompleteConfiguration"></app-single-auto-complete>
										<!-- <mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
										<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
									</mat-form-field>
								</div>
							</div>
						</div>
					</div>
					<!-- Role -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div>
							</div>
							<div class="row">
								<div class="col role-form">
									<mat-form-field>
										<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('roleOrganization')">
											<mat-option [value]="roleOrganizationEnum.Faculty">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Faculty)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.Librarian">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Librarian)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.Researcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Researcher)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.Student">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Student)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.EarlyCareerResearcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.EarlyCareerResearcher)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.ResearchAdministrator">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ResearchAdministrator)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.RepositoryManager">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.RepositoryManager)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.ResearchInfrastructure">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ResearchInfrastructure)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.ServiceProvider">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ServiceProvider)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.Publisher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Publisher)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.ResearchFunder">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.ResearchFunder)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.Policymaker">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Policymaker)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.SMEIndustry">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.SMEIndustry)}}</mat-option>
											<mat-option [value]="roleOrganizationEnum.Other">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Other)}}</mat-option>
										</mat-select>
									</mat-form-field>
								</div>
							</div>
						</div>
					</div>
					<!-- Timezone -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}} *</div>
							</div>
							<div class="row">
								<div class="col timezone-form">
									<mat-form-field>
										<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
										<mat-autocomplete #timezone="matAutocomplete">
											<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
												{{ timezone | timezoneInfoDisplay }}
											</mat-option>
										</mat-autocomplete>
										<mat-error *ngIf="this.formGroup.get('timezone').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
									</mat-form-field>
								</div>
							</div>
						</div>
					</div>
					<!-- Culture -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}} *</div>
							</div>
							<div class="row">
								<div class="col culture-form">
									<mat-form-field>
										<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
										<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
											<mat-option *ngFor="let culture of cultures | async" [value]="culture">
												{{ culture.displayName }} - {{ culture.nativeName }}
											</mat-option>
										</mat-autocomplete>
										<mat-error *ngIf="this.formGroup.get('culture').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
									</mat-form-field>
								</div>
							</div>
						</div>
					</div>
					<!-- Language -->
					<div class="row mb-5">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}} *</div>
							</div>
							<div class="row">
								<div class="col language-form">
									<mat-form-field>
										<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required>
											<mat-option *ngFor="let language of languages" [value]="language">
												{{ language.label | translate }}
											</mat-option>
										</mat-select>
										<mat-error *ngIf="this.formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
									</mat-form-field>
								</div>
							</div>
						</div>
					</div>
					<!-- Zenodo -->
					<div class="row mb">
						<div class="col">
							<div class="row">
								<div class="col-auto field-title">{{ 'USER-PROFILE.ZENODO.TITLE' | translate}}</div>
							</div>
							<div class="row">
								<div *ngIf="hasZenodo()" class="col-auto language-form d-flex">
									<mat-form-field>
										<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.ZENODO' | translate}}" value="{{zenodoEmail}}" matInput disabled>
										<mat-hint>{{'USER-PROFILE.ZENODO.DESCRIPTION' | translate}}</mat-hint>
									</mat-form-field>
									<div *ngIf="hasZenodo()" class="col-auto d-flex">
										<div class="remove-btn"><button mat-raised-button type="button" (click)="RemoveZenodo()" class="confirm unlinkBtn">{{'USER-PROFILE.ZENODO.LOGOUT' | translate}}</button></div>
									</div>
								</div>
								<div *ngIf="!hasZenodo()" class="col-md-4 link-zenodo-btn">
									<div><button mat-raised-button type="button" (click)="loginToZenodo()" class="confirm accent-btn mt-3">{{'USER-PROFILE.ZENODO.AUTHORIZE' | translate}}</button></div>
								</div>
							</div>
						</div>
					</div>
					<div class="row d-flex mb-5">
						<div class="col-auto ml-auto"><button mat-raised-button class="save-btn" type="button" (click)="save()">{{'USER-PROFILE.ACTIONS.SAVE' | translate}}</button></div>
					</div>
				</div>
			</div>
		</div>
		<ng-template #loading>
		</ng-template>
	</div>
</div>


<!-- <div class="main-content">
	<div class="container-fluid">
		<div *ngIf="user | async  as userProfile; else loading" class="row user-profile">
			<mat-card class="col-12 profile-card">
				<mat-card-content>
					<div class="row">
						<div class="col-12">
							<div class="row profile-card-center-row">
								<div class="col-auto"><img mat-card-avatar [src]="userProfile.avatarUrl" (error)="applyFallbackAvatar($event)">
								</div>
							</div>
							<div class="row profile-card-center-row">
								<mat-card-title class="col-auto">{{userProfile.name}}</mat-card-title>
							</div>
							<div class="row profile-card-center-row">
								<mat-card-subtitle class="col-auto">{{userProfile.email}}</mat-card-subtitle>
							</div>
							<div class="row profile-card-center-row">
								<a mat-raised-button (click)="logout()" class="col-3">
									{{'USER-DIALOG.LOG-OUT' | translate}} <mat-icon>exit_to_app</mat-icon>
								</a>
							</div>
						</div>
					</div>
				</mat-card-content>
			</mat-card>
			<mat-card class="col-12 profile-card">
				<mat-card-content>
					<div>
						<div>
							<h4>{{'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</h4>
						</div>
						<div>
							<mat-list>
								<mat-list-item *ngFor="let dmp of userProfile.associatedDmps">
									<div class="clickable" (click)="navigateToDmp(dmp)">
										{{dmp.label}}
									</div>
									<div class="ml-2">
										<mat-chip-list>
											<mat-chip>{{getUserRole(dmp)}}</mat-chip>
										</mat-chip-list>
									</div>
								</mat-list-item>
							</mat-list>
							<button mat-button (click)="showAllDmps()">
								{{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
						</div>
					</div>
				</mat-card-content>
			</mat-card>
			<mat-card class="col-12 profile-card">
				<mat-card-header>
					<mat-card-title>
						<div class="row">
							<h4 class="settings col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
							<button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()">
								<mat-icon class="mat-24">edit</mat-icon>
							</button>
							<button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()">
								<mat-icon class="mat-24">lock</mat-icon>
							</button>
						</div>
					</mat-card-title>
				</mat-card-header>
				<mat-card-content disabled="false">
					<div class="container">
						<div class="row" [formGroup]="formGroup">
							<mat-form-field class="col-md-4">
								<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}"
									[formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone"
									required>
								<mat-autocomplete #timezone="matAutocomplete">
									<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
										{{ timezone | timezoneInfoDisplay }}
									</mat-option>
								</mat-autocomplete>
							</mat-form-field>
							<mat-form-field class="col-md-4">
								<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}"
									[formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture"
									required>
								<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
									<mat-option *ngFor="let culture of cultures | async" [value]="culture">
										{{ culture.displayName }} - {{ culture.nativeName }}
									</mat-option>
								</mat-autocomplete>
							</mat-form-field>
							<mat-form-field class="col-md-4">
								<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}"
									[formControl]="this.formGroup.get('language')" required>
									<mat-option *ngFor="let language of languages" [value]="language">
										{{ language.label | translate }}
									</mat-option>
								</mat-select>
							</mat-form-field>
						</div>
					</div>
				</mat-card-content>
			</mat-card>
			<mat-card class="col-12 profile-card">
				<mat-card-header>
					<mat-card-title>
						<div class="row">
							<h4 class="settings col-auto">{{ 'USER-PROFILE.ZENODO.TITLE' | translate}}</h4>
						</div>
					</mat-card-title>
				</mat-card-header>
				<mat-card-content>
					<div class="container">
						<div class="row">
							<div class="col-md-4" *ngIf="!hasZenodo()">
								<button mat-raised-button type="button" (click)="loginToZenodo()" class="confirm" color="primary">{{'USER-PROFILE.ZENODO.LOGIN' | translate}}</button>
							</div>
							<div class="col-md-4" *ngIf="hasZenodo()">
								<div><label class="zenodo-email">{{ 'USER-PROFILE.ZENODO.DESCRIPTION' | translate}}</label></div>
								<label class="zenodo-email">{{zenodoEmail}}</label>
								<div><button mat-raised-button type="button" (click)="RemoveZenodo()" class="confirm unlinkBtn" >{{'USER-PROFILE.ZENODO.LOGOUT' | translate}}</button></div>
							</div>
						</div>
					</div>
				</mat-card-content>
			</mat-card>
		</div>
		<ng-template #loading>
		</ng-template>
	</div>
</div> -->
