{% include "systemstatistics/systemstatistics-reset-log-modal.html" %}

<h1 class="text-center mb-5">{{ heading }}</h1>


<div class="row">
 
  <div class="col-12 d-flex justify-content-end">
    <button class="btn float-right btn-lg btn-danger"  data-toggle="modal" data-target="#systemstatisticsResetUserLogModal"><i class="fas fa-trash-alt"></i> Daten zurücksetzen</button> 
  </div>

  <div class="col-12 mt-3">
    <form id="systemstatistiken-timeperiod-form" action="" method="get">
      <div class="form-row d-flex align-items-center">
        <label for="startDate" class="col-12 col-sm-4 col-lg-2 col-form label mb-0">Wähle Zeitraum:</label>
        <div class="col-12 col-sm-4 mt-2 mt-sm-0 col-lg-3">
          <input type="date" id="systemstatistikenStartDate" class="form-control form-control-lg">
        </div>
        <div class="col-12 col-sm-4 mt-2 mt-sm-0 col-lg-3">
          <input type="date" id="systemstatistikenEndDate" class="form-control form-control-lg">
        </div>
        <div class="col-12 mt-2 mt-lg-0 col-lg-3">
          <button id="systemstatistiken-timeperiod-submit" type="submit" class="btn btn-lg btn-primary">Ausführen</button>
        </div>
      </div>
    </form>
  </div>

</div>

<div class="row">
  {% include "systemstatistics/systemstatistics-login-history.html" %}
</div>

<div class="row">

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active.html" with {'usercreatedate': usercreatedate} %}

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-login.html" %}

</div>
<!--/row-->


<div class="row">

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-input.html" %}

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-lektionen.html" %}

</div>
<!--/row-->


<div class="row">

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active-counthour.html" %}

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active-countweekday.html" %}

</div>
<!--/row-->

<div class="row">

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active-countpage.html" %}

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active-sumpage.html" %}

</div>
<!--/row-->


<div class="row">

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active-countbrowser.html" %}

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-active-countdevicetype.html" %}

</div>
<!--/row-->

<div class="row">

  <!-- col 6 -->
  {% include "systemstatistics/systemstatistics-user-training-count.html" %}

  <!-- col 6 -->
  

</div>
<!--/row-->

<!--Aussortierte Grafiken-->
<!--Anzahl abgeschlossene Trainings pro Benutzer-->
{# {% include "systemstatistics/systemstatistics-user-training-compare.html" %} #}
<!--User Bewertung-->
{# {% include "systemstatistics/systemstatistics-user-bewertung.html" %} #}
<!--Benutzeraktivität (in Sekunden/Uhrzeit)-->
{# {% include "systemstatistics/systemstatistics-user-active-sumhour.html" %} #}
<!--Benutzeraktivität (in Sekunden/Wochentag)-->
{# {% include "systemstatistics/systemstatistics-user-active-sumweekday.html" %} #}


<style>
  .user-detail-lessons {
      padding: 1em 1em 0em 1em;
  }

button.btn.btn-link{
  padding-left: 0;
  color: black;
  font-size: 1.15em;
}

.prog-bar{
  background-color: #367e91;
    height: 5px;
    border-radius: 0.313em;
  }

.prog-bar-container,
.prog-bar-container-lessons {
      background-color: #d8e6e8;
      border-radius: 0.313em;
}

.prog-bar-container-lessons .prog-bar{
  margin-bottom: 1em;
}

.user-detail-progress{
  margin-bottom: 1.5em;
}

.user-detail-progress-number,
.user-detail-progress-number-lessons{
  float: right;
}
.user-detail-progress-number{
  margin-top: 6px;
  font-size: 1.15em;
}

.user-detail-box{
  border: solid 1px #d8e6e8;
  border-radius: 0.313em;
  padding: 0;
  margin: 1em;
}

.box-header{
  background-color: #d8e6e8;
}

.box-header h4{
  padding: 10px;
  margin-top: 0;
}

.box-body{
  padding: 10px;
}

.box-footer {
    padding: 10px;
  }

</style>
