<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>
        <input
          type="text"
          class="looks-input"
          [(ngModel)]="data.age"
          (change)="updateData()"
        />
      </div>
      <div class="looks-entry">
        <div class="looks-label">Größe</div>
        <input
          type="text"
          class="looks-input"
          [(ngModel)]="data.height"
          (change)="updateData()"
        />
      </div>
      <div class="looks-entry">
        <div class="looks-label">Gewicht</div>
        <input
          type="text"
          class="looks-input"
          [(ngModel)]="data.weight"
          (change)="updateData()"
        />
      </div>
      <div class="looks-entry">
        <div class="looks-label">Haarfarbe</div>
        <input
          type="text"
          class="looks-input"
          [(ngModel)]="data.hair"
          (change)="updateData()"
        />
      </div>
      <div class="looks-entry">
        <div class="looks-label">Augenfarbe</div>
        <input
          type="text"
          class="looks-input"
          [(ngModel)]="data.eyes"
          (change)="updateData()"
        />
      </div>
      <div class="looks-entry">
        <div class="looks-label">Hautfarbe</div>
        <input
          type="text"
          class="looks-input"
          [(ngModel)]="data.skin"
          (change)="updateData()"
        />
      </div>
    </div>
    <!-- DESCRIPTION -->
    <div class="description">
      <textarea
        class="description-area"
        [(ngModel)]="data.description"
        (change)="updateData()"
      ></textarea>
      <label class="description-label">Beschreibung</label>
    </div>
  </div>
  <!-- PERSONALITY -->
  <div class="personality">
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.personalityTraits"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Persönlichkeitsmerkmale</label>
    </div>
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.ideals"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Ideale</label>
    </div>
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.bonds"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Bindungen</label>
    </div>
    <div class="personality-box">
      <textarea
        class="personality-area"
        [(ngModel)]="data.flaws"
        (change)="updateData()"
      ></textarea>
      <label class="personality-label">Makel</label>
    </div>
  </div>
</div>
