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

<div class="heading left">{{ "movement.movement" | translate }}</div>
<div class="content t-05">
  {{ "movement.description" | translate }}
</div>

<div class="value-row">
  <value-box [value]="movement" [label]="'general.feet'"></value-box>
  <value-box [value]="movement / 5" [label]="'general.fields'"></value-box>
</div>

<div class="heading left">{{ "movement.jumping" | translate }}</div>
<div class="content t-05">
  {{ "movement.jumpingDescription" | translate }}
</div>
<div class="value-row">
  <value-box [value]="strength / 2" [label]="'general.feet'"></value-box>
  <value-box [value]="strength / 10" [label]="'general.fields'"></value-box>
</div>

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>{{
      "movement.translationTable" | translate
    }}</mat-panel-title></mat-expansion-panel-header
  >
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">{{ "general.feet" | translate }}</th>
        <th scope="col">{{ "general.meter" | translate }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>1,5</td>
      </tr>
      <tr>
        <td>10</td>
        <td>3</td>
      </tr>
      <tr>
        <td>15</td>
        <td>4,5</td>
      </tr>
      <tr>
        <td>20</td>
        <td>6</td>
      </tr>
      <tr>
        <td>25</td>
        <td>7,5</td>
      </tr>
      <tr>
        <td>30</td>
        <td>9</td>
      </tr>
      <tr>
        <td>35</td>
        <td>10,5</td>
      </tr>
      <tr>
        <td>40</td>
        <td>12</td>
      </tr>
      <tr>
        <td>45</td>
        <td>13,5</td>
      </tr>
      <tr>
        <td>50</td>
        <td>15</td>
      </tr>
      <tr>
        <td>55</td>
        <td>16,5</td>
      </tr>
      <tr>
        <td>60</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>
</mat-expansion-panel>
