<div class="general-container">
  <div class="first-row">
    <div class="image-container">
      @if (!image) {
        <img
          class="image-icon"
          src="assets/icons/UIIcons/image.svg"
          alt="Bild"
        />
      }
      @if (image) {
        <img class="portrait" [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">{{
          "character.general.species" | translate
        }}</label>
        <div class="looks-field">
          {{ "species." + data.race | translate }}
        </div>
      </div>
      <div class="looks-entry">
        <label class="looks-label">{{
          "character.general.class" | translate
        }}</label>
        <div class="looks-field">
          {{ "classes." + data.class | translate }}
        </div>
      </div>
      <div class="looks-entry">
        <label class="looks-label">{{
          "character.general.gender" | translate
        }}</label>
        <div class="looks-field">
          {{ "genders." + data.gender | translate }}
        </div>
      </div>
      <div class="looks-entry">
        <div class="looks-label">{{ "character.general.age" | translate }}</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">
          {{ "character.general.height" | translate }}
        </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">
          {{ "character.general.weight" | translate }}
        </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">
          {{ "character.general.hair" | translate }}
        </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">
          {{ "character.general.eyes" | translate }}
        </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">
          {{ "character.general.skin" | translate }}
        </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">{{
        "character.general.description" | translate
      }}</label>
    </div>
  </div>
  <!-- PERSONALITY -->
  <div class="personality">
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          id="personality"
          class="personality-input"
          [(ngModel)]="data.personalityTraits"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label for="personality" class="personality-label">{{
        "character.general.personality" | translate
      }}</label>
    </div>
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          id="ideals"
          class="personality-input"
          [(ngModel)]="data.ideals"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label for="ideals" class="personality-label">{{
        "character.general.ideals" | translate
      }}</label>
    </div>
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          id="bonds"
          class="personality-input"
          [(ngModel)]="data.bonds"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label for="bonds" class="personality-label">{{
        "character.general.bonds" | translate
      }}</label>
    </div>
    <div class="personality-box">
      <mat-form-field appearance="outline" class="personality-wrapper">
        <textarea
          matInput
          id="flaws"
          class="personality-input"
          [(ngModel)]="data.flaws"
          (change)="updateData()"
        ></textarea>
      </mat-form-field>
      <label for="flaws" class="personality-label">{{
        "character.general.flaws" | translate
      }}</label>
    </div>
  </div>
</div>
