<div class="general-container">
  <div class="first-row">
    <div class="image-container">
      <img
        class="image-icon"
        *ngIf="!image"
        src="assets/icons/UIIcons/image.svg"
        alt="Bild"
      />
      <img class="portrait" *ngIf="image" [src]="image" alt="portrait" />
      <img
        class="upload-icon"
        src="assets/icons/UIIcons/upload.svg"
        alt="upload"
      />
      <input
        id="fileInput"
        class="upload-input"
        type="file"
        (change)="onImageUpload($event)"
      />
    </div>
    <!-- LOOKS -->
    <div class="looks">
      <div class="looks-entry">
        <label class="looks-label">Volk</label>
        <div class="looks-field">
          {{ races[data.race].display }}
        </div>
      </div>
      <div class="looks-entry">
        <label class="looks-label">Klasse</label>
        <div class="looks-field">
          {{ classes[data.class].display }}
        </div>
      </div>
      <div class="looks-entry">
        <label class="looks-label">Geschlecht</label>
        <div class="looks-field">
          {{ genders[data.gender].display }}
        </div>
      </div>
      <div class="looks-entry">
        <div class="looks-label">Alter</div>
        <mat-form-field appearance="outline" class="looks-input">
          <input matInput [(ngModel)]="data.age" (change)="updateData()" />
        </mat-form-field>
      </div>
      <div class="looks-entry">
        <div class="looks-label">Größe</div>
        <mat-form-field appearance="outline" class="looks-input">
          <input matInput [(ngModel)]="data.height" (change)="updateData()" />
        </mat-form-field>
      </div>
      <div class="looks-entry">
        <div class="looks-label">Gewicht</div>
        <mat-form-field appearance="outline" class="looks-input">
          <input matInput [(ngModel)]="data.weight" (change)="updateData()" />
        </mat-form-field>
      </div>
      <div class="looks-entry">
        <div class="looks-label">Haarfarbe</div>
        <mat-form-field appearance="outline" class="looks-input">
          <input matInput [(ngModel)]="data.hair" (change)="updateData()" />
        </mat-form-field>
      </div>
      <div class="looks-entry">
        <div class="looks-label">Augenfarbe</div>
        <mat-form-field appearance="outline" class="looks-input">
          <input matInput [(ngModel)]="data.eyes" (change)="updateData()" />
        </mat-form-field>
      </div>
      <div class="looks-entry">
        <div class="looks-label">Hautfarbe</div>

        <mat-form-field appearance="outline" class="looks-input">
          <input matInput [(ngModel)]="data.skin" (change)="updateData()" />
        </mat-form-field>
      </div>
    </div>
    <!-- DESCRIPTION -->
    <div class="description">
      <mat-form-field appearance="outline" class="description-wrapper">
        <textarea
          class="description-input"
          matInput
          [(ngModel)]="data.description"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label class="description-label">Beschreibung</label>
    </div>
  </div>
  <!-- PERSONALITY -->
  <div class="personality">
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          class="personality-input"
          [(ngModel)]="data.personalityTraits"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label class="personality-label">Persönlichkeitsmerkmale</label>
    </div>
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          class="personality-input"
          [(ngModel)]="data.ideals"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label class="personality-label">Ideale</label>
    </div>
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          class="personality-input"
          [(ngModel)]="data.bonds"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label class="personality-label">Bindungen</label>
    </div>
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          class="personality-input"
          [(ngModel)]="data.flaws"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label class="personality-label">Makel</label>
    </div>
  </div>
</div>
