<div class="col-12 col-sm-4 col-md-3 col-lg-3 col-xl-3">
    <div class="ts-tile card">

        <div class="ts-tile-head">

            <img id="{{training.title}}-image" class="tile-img-top img-fluid" src="
                {% if training.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{training.imageurl}}
                {% endif %}" height="100vh" alt="Beitragsbild zu {{training.title}}">

        </div>
        <div class="ts-start-training-box d-flex justify-content-between">
            <div class="ts-start-training-link">
                {% if training.url is not empty %}
                    {% if training.showLektionsliste() %}
                    <a href="{{training.url}}" aria-label="Übersicht von {{training.title}} öffnen">
                        <i aria-hidden="true" class="{% if training.getFin() == 0 %}primary-color{% endif %} fas fa-list lockicon lockicon2 p-3" data-toggle="tooltip" data-placement="top" title="Übersicht"></i>
                    </a>
                    {% else %}
                    <a href="{{training.getLektionsliste()[0].getFirstPageUrl()}}" aria-label="{{training.title}} starten">
                        <i aria-hidden="true" class="{% if training.getFin() == 0 %}primary-color{% endif %} fas fa-play lockicon lockicon2 p-3" data-toggle="tooltip" data-placement="top" title="Starten"></i>
                    </a>
                    {% endif %}
                    
                {% endif %}
            </div>
            {% if training.getFin() > 0 and training.getLastPage() is not null and training.showResumeOption() %}
            <div class="ts-start-training-link training-next-link">
                <a href="{{training.getLastPage().getUrl()}}" aria-label="{{training.title}} fortsetzen">
                    <i aria-hidden="true" class="primary-color fas fa-chevron-circle-right lockicon lockicon2 p-3" data-toggle="tooltip" data-placement="top" title="Fortsetzen"></i>
                </a>
            </div>
            {% endif %}
        </div>

        <div class="tile-body ts-tile-body">
            <a href="{% if training.showLektionsliste() %}{{training.url}}{% else %}{{training.getLektionsliste()[0].getFirstPageUrl()}}{% endif %}">
                <h4 class="tile-title">
                    {% if not training.trainingEnabled() and canSeeHiddenTrainings %}
                    <i class="fas fa-eye-slash" aria-hidden="true" title="Training ist ausgeblendet"></i><span class="sr-only">Training ist ausgeblendet</span>&nbsp;
                    {% endif %}
                    {{training.title}}
                </h4>
            </a>
            <div class="progress" style="height: 3px;">
                <div class="progress-bar" role="progressbar" aria-label="Fortschritt" style="width:{{training.getFin()}}%"
                    aria-valuenow="{{training.getFin()}}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="tile-text">{{training.excerpt | raw}}</div>
        </div>
    </div>
</div>