<div class="profile">
  <div class="profile-container">
    <pa-button
      class="close-button"
      icon="cross"
      aspect="basic"
      (click)="goBack()">
      {{ 'generic.close' | translate }}
    </pa-button>

    <form [formGroup]="profileForm">
      <h1>{{ 'generic.user_preferences' | translate }}</h1>

      <div class="field">
        <pa-input
          formControlName="name"
          id="name"
          required
          [errorMessages]="profile_validation_messages.name">
          {{ 'profile.name' | translate }}
        </pa-input>
      </div>

      <div class="field">
        <pa-input
          formControlName="email"
          id="email"
          required
          type="email"
          [errorMessages]="profile_validation_messages.email">
          {{ 'generic.email' | translate }}
        </pa-input>
      </div>

      <div class="field">
        <label for="language">{{ 'generic.language' | translate }}</label>
        <pa-radio-group
          id="language"
          formControlName="language">
          @for (lang of languages; track lang) {
            <pa-radio [value]="lang.value">
              {{ lang.label | translate }}
            </pa-radio>
          }
        </pa-radio-group>
      </div>

      <div class="actions">
        <pa-button
          kind="primary"
          (click)="save()">
          {{ 'generic.save' | translate }}
        </pa-button>
      </div>
    </form>
  </div>
</div>
