<div class="character-card" (click)="selectCharacter()">
  <div
    class="delete-area"
    (click)="deleteCharacter(); $event.stopPropagation()"
  >
    <img
      style="width: 50%"
      src="assets/icons/UIIcons/delete.svg"
      alt="Delete Button"
    />
  </div>
  <!-- The characterData is not loaded initially, so this is a workaround. Maybe add a resolver first -->
  @if(image){
  <img [src]="image" alt="portrait" />
  } @else if (characterData !== undefined) {
  <img
    [src]="'assets/images/' + characterData.gender.toLowerCase() + '.jpg'"
    alt="character"
  />
  } @if(characterData !== undefined){
  <div class="content">
    <!-- <div>{{ image }}</div> -->
    <div class="name">{{ character }}</div>
    <div class="level">Stufe {{ characterData.level }}</div>
    <div class="species">{{ races[characterData.race].display }}</div>
    <div class="class">
      {{ classes[characterData.class].display }}
    </div>

    <!-- <div class="subclass">{{ characterData.class }}</div> -->
  </div>
  }
</div>
