DNDTools/src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-details/attribute-details.component.html

<div>
  <div class="title">{{ "attributes." + attribute.name | translate }}</div>
  <div class="content">
    {{ "attributeDetails." + attribute.name | translate }}
  </div>
</div>
<div class="attribute-container">
  <value-box [value]="attribute.value" [label]="'attributes.value'"></value-box>
  <value-box [value]="modifier" [label]="'general.modifier'"></value-box>
</div>

@if (attribute.name !== "constitution") {
  <div class="subheading left">
    {{ "attributeDetails.affectedSkills" | translate }}
  </div>
  <div class="skills">
    @for (skill of skillsTable[attribute.name]; track skill) {
      <div class="skill-item">{{ "skills." + skill | translate }}</div>
    }
  </div>
}

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>{{ "general.modifiers" | translate }}</mat-panel-title>
  </mat-expansion-panel-header>
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">{{ "general.attributeValue" | translate }}</th>
        <th scope="col">{{ "general.modifier" | translate }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>6-7</td>
        <td>-3</td>
      </tr>
      <tr>
        <td>7-8</td>
        <td>-2</td>
      </tr>
      <tr>
        <td>9-10</td>
        <td>-1</td>
      </tr>
      <tr>
        <td>11-12</td>
        <td>0</td>
      </tr>
      <tr>
        <td>13-14</td>
        <td>+1</td>
      </tr>
      <tr>
        <td>15-16</td>
        <td>+2</td>
      </tr>
      <tr>
        <td>17-18</td>
        <td>+3</td>
      </tr>
      <tr>
        <td>19-20</td>
        <td>+4</td>
      </tr>
      <tr>
        <td>21-22</td>
        <td>+5</td>
      </tr>
      <tr>
        <td>22-23</td>
        <td>+6</td>
      </tr>
      <tr>
        <td>24-25</td>
        <td>+7</td>
      </tr>
    </tbody>
  </table>
</mat-expansion-panel>

@if (attribute.name === "constitution") {
  <!-- Resistances etc. -->
  <div class="heading-row t-2">
    <h4>{{ "attributeDetails.strengths" | translate }}</h4>
    <icon-button
      [icon]="isEdit ? 'cross' : 'edit'"
      (click)="toggleEdit()"
    ></icon-button>
  </div>
  <!-- Resistance -->
  <div class="resistance-box">
    <div class="input-label">{{ "resistances.resistances" | translate }}</div>
    @if (isEdit) {
      <mat-form-field appearance="outline">
        <mat-select
          [(ngModel)]="resistances"
          (selectionChange)="showButtons()"
          multiple
        >
          @for (type of list.damageTypes; track type) {
            <mat-option [value]="type">
              {{ "damageTypes." + type | translate }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    } @else {
      <div class="resistance-container">
        @for (type of resistances; track type) {
          <icon [size]="'s'" [type]="'damage'" [icon]="type"></icon>
        } @empty {
          -
        }
      </div>
    }
  </div>

  <!-- Immunity -->
  <div class="resistance-box">
    <div class="input-label">{{ "resistances.immunities" | translate }}</div>
    @if (isEdit) {
      <mat-form-field appearance="outline">
        <mat-select
          [(ngModel)]="immunities"
          (selectionChange)="showButtons()"
          multiple
        >
          @for (type of list.damageTypes; track type) {
            <mat-option [value]="type">
              {{ "damageTypes." + type | translate }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    } @else {
      <div class="resistance-container">
        @for (type of immunities; track type) {
          <icon [size]="'s'" [type]="'damage'" [icon]="type"></icon>
        } @empty {
          -
        }
      </div>
    }
  </div>

  <!-- Vulnerabilities -->
  <div class="resistance-box">
    <div class="input-label">
      {{ "resistances.vulnerabilities" | translate }}
    </div>
    @if (isEdit) {
      <mat-form-field appearance="outline">
        <mat-select
          [(ngModel)]="vulnerabilities"
          (change)="showButtons()"
          multiple
        >
          @for (type of list.damageTypes; track type) {
            <mat-option [value]="type">
              {{ "damageTypes." + type | translate }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    } @else {
      <div class="resistance-container">
        @for (type of vulnerabilities; track type) {
          <icon [size]="'s'" [type]="'damage'" [icon]="type"></icon>
        } @empty {
          -
        }
      </div>
    }
  </div>

  @if (showButtonsContainer) {
    <div class="vertical-buttons t-2">
      <ui-button
        [color]="'green'"
        [type]="'save'"
        [width]="'w20'"
        (click)="close()"
      >
      </ui-button>
      <ui-button
        [color]="'red'"
        [type]="'discard'"
        [width]="'w20'"
        (click)="close()"
      >
      </ui-button>
    </div>
  }
}