<div class="card training-card">
    <div class="card-header" id="headingOne">
        <button class="btn btn-link w-100 ts-flexbutton ts-list-button" data-toggle="collapse"
            data-target="#training{{r}}-{{index}}-{{loop.index}}-body" aria-expanded="false"
            aria-controls="training{{r}}-{{index}}-{{loop.index}}-body">
            <div class="header image">
                <img id="{{training.title}}-image" class="image-responsive" src="
                {% if training.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{training.imageurl}}
                {% endif %}" width="10%" alt="logo" />
            </div>
            <div class="ts-list-title-icon w-100">
                <p class="training-card-title text-left">
                    {% if not training.trainingEnabled() and canSeeHiddenTrainings %}
                        <i class="fas fa-eye-slash" title="Training ist ausgeblendet"></i>&nbsp;
                    {% endif %}
                    {{training.title}}</p>
                <i class="fas fa-chevron-right"></i>
                <i class="fas fa-chevron-down"></i>
            </div>

        </button>
    </div>

    <div id="training{{r}}-{{index}}-{{loop.index}}-body" class="collapse hide"
        data-parent="#training-overview-list{{r}}">
        <div class="card-body panel-body">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    {% if training.excerpt is not empty %}
                        {{training.excerpt | raw}}
                    {% endif %}
                    {% if userloggedin %}
                    <a class="btn {% if training.getFin() == 0 %} btn-primary {% else %} btn-secondary {% endif %}" 
                    href="
                    {% if training.url is empty %}
                        {{defaultimglink}}
                    {% else %}
                        {% if training.showLektionsliste() %}
                            {{training.url}}
                        {% else %}
                            {{training.getLektionsliste()[0].getFirstPageUrl()}}
                        {% endif %}
                    {% endif %}"> Starten <i class="fas fa-play"></i></a>
                    {% endif %}
                    {% if training.getFin() > 0 and training.getLastPage() is not null %}
                    <a class="btn btn-primary ml-2" href="{{ training.getLastPage().getUrl() }}">Fortsetzen <i class="fas fa-chevron-right"></i></a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>


<!--Test:-->
<style>
    i.fas.fa-play {
    font-size: 0.8em;
}
</style>