<div class="lists"><span>Wybierz urządzenie:</span></div>
<div class="machine-list">
  <div class="row row-list">
    <div class="col-md-3 col-xs-3" *ngFor="let device of devices">
      <button
        class="room-button"
        [ngStyle]="{
          color: device.lastStatus == 1 ? 'red' : 'green',
          borderColor: device.lastStatus == 1 ? 'red' : 'green'
        }"
      >
        {{ device.name }}
      </button>
      <b>{{ device.lastStatus == 1 ? "Zajęte" : "Wolne" }}</b>
    </div>
  </div>
</div>

<div class="row machine-row">
  <div class="col-md-5  col-xs-11">
    <p class="text-center machine-text">
      - <span>{{ activeDevice.name }}</span> -
    </p>

    <p class="machine-status">
      Status:
      <img
        [src]="
          activeDevice.lastStatus == 1
            ? '../assets/img/busy.png'
            : '../assets/img/free.png'
        "
        alt=""
      />
      <span>{{ activeDevice.lastStatus == 1 ? "Zajęte" : "Wolne" }}</span>
    </p>
    <p *ngIf="activeDevice.lastStatus == 1" class="machine-status2">
      Zajęte od: <span>{{ this.time }}</span>
    </p>
  </div>
  <div class="col-md-7 col-xs-1">
    <img
      class="machine-image"
      src="../assets/img/football2.jpg"
      alt="{{ status }}"
    />
  </div>
</div>
<div class="row statistics-row">
  <div class="col-md-6 stat-wrapper">
    <p class="stat-text"><span>Statystyki szczegółowe:</span></p>
    <ul class="list-group">
      <p style="margin-bottom:15px">
        <span>Średni czas gry: </span> <span class="boldMe">23</span
        ><span> min</span><br />
      </p>

      <span>Przewidywane zakończenie: </span>
      <span class="boldMe">10</span
      ><span> min</span>
    </ul>
  </div>
</div>
<div class="row">
  <div id="tabel" class="col-md-6"><canvas id="lineChart"></canvas></div>
  <div id="tabel" class="col-md-6"><canvas id="barChart"></canvas></div>
</div>