DNDTools/src/app/character/character-picker/character-card/character-card.component.html

<div class="character-card" (click)="selectCharacter()">
  <div
    id="delete-button"
    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" class="portrait" />
  } @else if (characterData !== undefined) {
    <img
      [src]="'assets/images/' + characterData.gender.toLowerCase() + '.jpg'"
      alt="character"
      class="portrait"
    />
  }
  @if (characterData !== undefined) {
    <div class="content">
      <div class="name">{{ character }}</div>
      <div class="character-info">
        <div class="entry">
          {{ "general.level" | translate }} {{ characterData.level }}
        </div>
        <hr />
        <div class="entry">
          {{ "species." + characterData.race | translate }}
        </div>
        <hr />
        <div class="entry">
          {{ "classes." + characterData.class | translate }}
        </div>
        @if (characterData.subclass) {
          <hr />
          <div class="entry">
            {{
              "subclasses." + characterData.class + "." + characterData.subclass
                | translate
            }}
          </div>
        }
      </div>
    </div>
  }
</div>