<div class="title">{{ "exhaustion.label" | translate }}</div>

<div class="content">{{ "exhaustion.description" | translate }}</div>

<value-box
  [value]="exhaustion"
  [label]="'exhaustion.currentExhaustion'"
></value-box>

<div class="t-2">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">{{ "general.level" | translate }}</th>
        <th scope="col">{{ "general.effect" | translate }}</th>
      </tr>
    </thead>
    <tbody>
      <tr [ngClass]="{ highlighted: exhaustion === 0 }">
        <td>0</td>
        <td>{{ "exhaustion.0" | translate }}</td>
      </tr>
      <tr [ngClass]="{ highlighted: exhaustion > 0 }">
        <td>1</td>
        <td>{{ "exhaustion.1" | translate }}</td>
      </tr>
      <tr [ngClass]="{ highlighted: exhaustion > 1 }">
        <td>2</td>
        <td>{{ "exhaustion.2" | translate }}</td>
      </tr>
      <tr [ngClass]="{ highlighted: exhaustion > 2 }">
        <td>3</td>
        <td>{{ "exhaustion.3" | translate }}</td>
      </tr>
      <tr [ngClass]="{ highlighted: exhaustion > 3 }">
        <td>4</td>
        <td>{{ "exhaustion.4" | translate }}</td>
      </tr>
      <tr [ngClass]="{ highlighted: exhaustion > 4 }">
        <td>5</td>
        <td>{{ "exhaustion.5" | translate }}</td>
      </tr>
      <tr [ngClass]="{ highlighted: exhaustion > 5 }">
        <td>5</td>
        <td>{{ "exhaustion.6" | translate }}</td>
      </tr>
    </tbody>
  </table>
</div>
