<div class="card user-detail-box">
  <div class="box-header">
    {% set countTrainings = 0 %}
    {% for training in listuser.trainings %}
      {% if training.trainingEnable or canSeeHiddenTrainings %}
        {% set countTrainings = countTrainings + 1 %}
      {% endif %}
    {% endfor %}
    {% if listuser.trainings|first.id != "" and countTrainings > 0 %}
      <h4>
        {{ countTrainings }}
        {% if countTrainings == 1 %}
          Training
        {% else %}
          Trainings
        {% endif %}
      </h4>
    {% else %}
      <h4>Keine Trainings</h4>
    {% endif %}
  </div>
  <div class="box-body">
    {% if listuser.trainings|first.id != "" %}
      {% for training in listuser.trainings %}
        {% if training.trainingEnable or canSeeHiddenTrainings %}
          <div class="user-detail-progress">

            <span>
              <button type="button" class="btn btn-link ts-list-button" data-toggle="collapse" {%set rand = random()%} data-target="#demo_{{rand}}" aria-expanded="false">
                <div class="ts-list-title-icon d-inline-block">
                <i class="fas fa-chevron-right"></i>
                <i class="fas fa-chevron-down"></i>
                </div>
                {% if canSeeHiddenTrainings and not training.trainingEnable %}
                  &nbsp;<i class="fas fa-eye-slash" title="Training ist ausgeblendet"></i>&nbsp;
                {% endif %}
                {{ training.title }}
              </button>
            </span>
            {% if userCanSeeTrainingsProgress %}
              <div class="user-detail-progress-number">
                {{ training.getFin() }} %
              </div>
              <div class="prog-bar-container">
                <div class="prog-bar" style="width:{{ training.getFin() }}%"></div>
              </div>
            {% endif %}
            <!-- <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#demo{{training.title}}">Detail</button> -->
            <div
              id="demo_{{rand}}"
              class="collapse user-detail-lessons {% if not userCanSeeTrainingsProgress %} pt-0{% endif %}"
            >
              {% for lektion in training.lektionsliste %}
                <span class="lesson-name">{{ lektion.title }}</span>
                {% if userCanSeeTrainingsProgress %}
                  <span class="user-detail-progress-number-lessons"
                    >{{ lektion.fin }} %{% if training.id != "" and lektion.id != "" and lektion.getTrainingAuto() == "2" and lektion.getFin() == 100 and not lektion.isFeedback() %}
                    <i class="fas fa-exclamation-circle highlight-color"></i>
                    {% endif %}
                  </span>
                  <div class="prog-bar-container-lessons">
                    <div class="prog-bar" style="width:{{ lektion.fin }}%"></div>
                  </div>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
    {%if training_button%}
      {% if canAddTrainings %}
      <form target="_blank" class="mb-0" method="POST" action="{{ urlT }}">
        <input type="hidden" name="formuserid" value="{{ listuser.id }}" />
        <input
          class="btn btn-primary mb-0"
          name="formuseridadd"
          id="add"
          type="submit"
          value="Hinzufügen"
        />
      </form>
      {% endif %}
    {%endif%}
  </div>
</div><!--card-->
