<div class="mt-5">
  <div class="row"
       [attr.data-intro]="'component.timer.description' | translate"
       [attr.aria-label]="'component.timer.description' | translate">
    <div class="col-12"
         role="slider">
      <div id="slider"
           class="slider"></div>
    </div>
    <div class="col-12">
      <div class="input-group justify-content-center align-items-center">
          <span class="fas fa-hourglass text-light mr-3"
                aria-hidden="true"></span>
        <input type="number"
               class="border-0 rounded"
               [min]="minCountdownValue"
               [title]="countdown + ('component.timer.second' | translate:{COUNT: countdown})"
               id="slider-timer-input-field"
               [value]="countdown"
               (input)="updateCountdown($event)"
               (propertyChange)="updateCountdown($event)"
               [attr.aria-valuetext]="countdown + ('component.timer.second' | translate:{COUNT: countdown})"/>
        <span class="text-center text-light ml-3">
            {{ 'component.timer.second' | translate:{COUNT: countdown} }}
          </span>
      </div>
    </div>
    <div *ngIf="countdown"
         class="col-12">
      <p class="text-center text-light mt-4"
         id="parsedTime">
          <span id="hours"
                class="mr-2">
            <span [innerHTML]="parsedHours"
                  class="mr-1"></span>
            <span [innerHTML]="'component.timer.hour' | translate:{COUNT: plainHours}"></span>
          </span>
        <span id="minutes"
              class="mr-2">
            <span [innerHTML]="parsedMinutes"
                  class="mr-1"></span>
            <span [innerHTML]="'component.timer.minute' | translate:{COUNT: plainMinutes}"></span>
          </span>
        <span id="seconds">
            <span [innerHTML]="parsedSeconds"
                  class="mr-1"></span>
            <span [innerHTML]="'component.timer.second' | translate:{COUNT: plainSeconds}"></span>
          </span>
      </p>
    </div>
  </div>
</div>