<div class="flex column fill middle">
  <form [formGroup]="profileForm" (ngSubmit)="saveProfile()" *ngIf="user">
    <mat-card>
      <mat-card-content>
        <mat-form-field>
          <mat-label>{{'profile.username' | i18n}}</mat-label>
          <input matInput formControlName="username" type="name">
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'profile.name' | i18n}}</mat-label>
          <input matInput formControlName="name" type="name">
          <mat-error *ngIf="profileHasError('name')">
            {{'profile.name.error' | i18n}}
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'profile.email' | i18n}}</mat-label>
          <input matInput formControlName="email" type="email">
          <mat-error *ngIf="profileHasError('email')">
            {{'profile.email.error' | i18n}}
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'profile.about' | i18n}}</mat-label>
          <textarea matAutosize matAutosizeMinRows="3" matInput formControlName="about"></textarea>
          <mat-error>
            {{'profile.about.error' | i18n}}
          </mat-error>
        </mat-form-field>
        @if (admin) {
        <mat-slide-toggle class="margin" [checked]="isAdmin" (change)="isAdmin=$event.checked">
          {{'user.admin' | i18n}}
        </mat-slide-toggle>
        }
      </mat-card-content>
      <mat-card-actions>
        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="profileForm.invalid">
          {{'profile.update' | i18n}}
        </button>
        <a *ngIf="profileSuccess" mat-button color="primary">{{'profile.success' | i18n}}</a>
      </mat-card-actions>
    </mat-card>
  </form>

  @if(admin) {
  <form [formGroup]="passwordForm" (ngSubmit)="setPassword()">
    <mat-card>
      <mat-card-content>
        <mat-form-field>
          <mat-label>{{'password.new' | i18n}}</mat-label>
          <input matInput formControlName="password" type="password">
          <mat-error *ngFor="let error of passwordForm.get('password').errors | keyvalue">
            {{'password.error.' + error.key | i18n}}
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'password.repeat' | i18n}}</mat-label>
          <input matInput formControlName="password2" type="password">
          <mat-error *ngFor="let error of passwordForm.get('password2').errors | keyvalue">
            {{'password.error.' + error.key | i18n}}
          </mat-error>
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
          {{'password.update' | i18n}}
        </button>
        <a *ngIf="passwordSuccess" mat-button color="primary">{{'password.success' | i18n}}</a>
        @if (admin && user && user.username) {
        <span class="spacer"></span>
        <a mat-raised-button color="warn" (click)="deleteUser()">
          <mat-icon>delete</mat-icon> {{'user.delete' | i18n}}
        </a>
        }
      </mat-card-actions>
    </mat-card>
  </form>
  }
</div>