<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="logo">

        </div>
        <div class="ts-start-training-box d-flex justify-content-between">
            <!-- <div class="ts-start-training-button">
                {# {% if training.url is empty %}
                <i class="fas fa-lock lockicon"></i>
                {% else %}
                <i class="fas fa-lock-open lockicon"></i>
                {% endif %} #}
            </div> -->
            <div class="ts-start-training-link">
                {% if training.url is not empty %}
                    <a href="{% if training.showLektionsliste() %}{{training.url}}{% else %}{{training.getLektionsliste()[0].getFirstPageUrl()}}{% endif %}">
                        <i class="{% if training.getFin() == 0 %}primary-color{% endif %} fas fa-play lockicon lockicon2 p-3" data-toggle="tooltip" data-placement="top" title="Start"></i>
                    </a>
                {% endif %}
            </div>
            {% if training.getFin() > 0 and training.getLastPage() is not null %}
            <div class="ts-start-training-link training-next-link">
                <a href="{{training.getLastPage().getUrl()}}">
                    <i 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" title="Training ist ausgeblendet"></i>&nbsp;
                    {% endif %}
                    {{training.title}}
                </h4>
            </a>
            <div class="progress" style="height: 3px;">
                <div class="progress-bar" role="progressbar" 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>