<h1 class="mb-5 text-center">{{ heading }}</h1>
{% for training in trainings %}
    <ul class="lektionliste keinlink oben30">
        <a data-toggle="collapse" href="#{{training.title|replace({' ': '_'})}}" role="button" aria-expanded="false" aria-controls="{{training.title}}">
            <h4><i class="fas fa-caret-down"></i> {{training.title}} {{training.fin}}% </h4>
        </a>
        <div class="collapse" id="{{training.title|replace({' ': '_'})}}">
            <div class="card card-body">
                {% for lektion in training.lektionsliste %}
                    <li class="listitem" style="margin-top: 10px">
                        <a class="listheader" href="{{lektion.firstPageUrl}}">
                            <p class="training-title" >
                                {{lektion.title}}
                                <span class="percent-value" >
                                {{lektion.fin}}%
                                <span>
                            </p>
                        </a>
                        <div class="progress-wrapper">
                            <div class="lektion-progress" aria-valuenow="{{lektion.fin}}" aria-valuemin="0" aria-valuemax="100" style="width:{{lektion.fin}}%">
                                <div class="bar">
                                </div>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </div>
        </div>
    </ul>
{% endfor %}

{# <h3>Dein Trainingsfortschritt</h3>
{% for training in trainings %}
    <ul class="lektionliste keinlink oben30">
        <h4>{{training.title}} {{training.fin}}%</h4>
        {% for lektion in training.lektionsliste %}
        <li class="listitem" style="margin-top: 10px">
            <a class="listheader" href="{{lektion.firstPageUrl}}">
                <p class="training-title" >
                    {{lektion.title}}
                    <span class="percent-value" >
                {{lektion.fin}}%
                <span>
                </p>
            </a>
            <div class="progress-wrapper">
                <div class="lektion-progress" aria-valuenow="{{lektion.fin}}" aria-valuemin="0" aria-valuemax="100" style="width:{{lektion.fin}}%">
                    <div class="bar">
                    </div>
                </div>
            </div>
        </li>
        {% endfor %}
    </ul>
{% endfor %} #}
