
<h1 class="text-center mb-5">{{training_title|raw}}</h1>
{% if contentPlacement == "top"%}
    {{content|raw}}
{% endif %}

<div class="row">
    {% if limesurvey_status.limesurvey_id_before_training_id %}
    <div class="col col-sm-4 col-md-3 col-lg-3 col-xl-3">
    <div class="card lesson-card">
        <div class="ts-tile-head">


        <img id="{{lektion.title}}-image" class="card-img-top image-responsive" src="
                {% if lektion.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{lektion.imageurl}}
                {% endif %}" height="100vh" alt="logo" />
        </div>

        <div class="ts-start-training-box">
            <div class="">
            </div>

            <div class=" ts-start-training-link">
                {% if not limesurvey_status.limesurvey_id_before_training %}
                <a href="{{ limesurvey_status.limesurvey_id_before_training_url }}" class="listheader" target="_blank"><i class="fas fa-external-link-square-alt lockicon lockicon2"></i></a>
                {% else %}
                <i class="fas fa-check-square lockicon lockicon2"></i>
                {% endif %}
            </div>
        </div>

        <div class="card-body lesson-card">
            <h4 class="card-title">
                {% if limesurvey_status.limesurvey_id_before_training_id %}
                {% if not limesurvey_status.limesurvey_id_before_training %}
                Umfrage "{{ limesurvey_status.limesurvey_id_before_training_title }}" ausfüllen!
                {% else %}
                Umfrage "{{ limesurvey_status.limesurvey_id_before_training_title }}" wurde ausgefüllt!
                {% endif %}
                {% endif %}
            </h4>
            <div class="progress" style="height: 3px;">
                <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="card-text">0% </div>
        </div>
    </div>
    </div>
    {% endif %}


    {% for lektion in lektion_overview_list %}
        {% if loop.index == userlektionat and usercontinue != true %}
            <div class="col col-xs-12"><div role="alert" class="alert alert-warning">Warten auf Feedback für {{lektion.title}}!</div></div>
        {% endif %}
    {% endfor %}

    {% for lektion in lektion_overview_list %}

        {% if (userlektionat == loop.index0 and usercontinue == true) or (userlektionat > loop.index0) %}

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

                <img id="{{lektion.title}}-image" class="card-img-top image-responsive" src="
                {% if lektion.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{lektion.imageurl}}
                {% endif %}" height="100vh" alt="logo" />
        </div>
                <div class="ts-start-training-box">
                    <div class="div1">
                        {# {% 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 limesurvey_status.limesurvey_id_before_training_id %}
                            {% if not limesurvey_status.limesurvey_id_before_training %}
                                <i class="fas fa-chevron-circle-right lockicon lockicon2"></i>
                            {% else %}
                                <a href="{{lektion.firstPageUrl}}"><i class="fas fa-chevron-circle-right lockicon lockicon2"></i></a>
                            {% endif %}
                        {% else %}
                            <a href="{{lektion.firstPageUrl}}"><i class="fas fa-chevron-circle-right lockicon lockicon2"></i></a>
                        {% endif %}
                    </div>
                </div>

                <div class="card-body lesson-card">
                    <h4 class="card-title">{{lektion.title}}</h4>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar" role="progressbar" style="width: {{lektion.fin}}%" aria-valuenow="{{lektion.fin}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="card-text">{{lektion.fin}}% {{lektion.excerpt | raw}}</div>
                </div>
            </div>
            </div>

        {% else %}

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

                <img id="{{lektion.title}}-image" class="card-img-top image-responsive" src="
                {% if lektion.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{lektion.imageurl}}
                {% endif %}" height="100vh" alt="logo" />
                </div>
                <div class="ts-start-training-box">
                    <div class="div1">
                        {# {% 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 limesurvey_status.limesurvey_id_before_training_id %}
                            {% if not limesurvey_status.limesurvey_id_before_training %}
                                <i class="fas fa-chevron-circle-right lockicon lockicon2 pointerdisabled"></i>
                            {% else %}
                                <a href="#"><i class="fas fa-chevron-circle-right lockicon lockicon2 pointerdisabled"></i></a>
                            {% endif %}
                        {% else %}
                            <a href="#"><i class="fas fa-chevron-circle-right lockicon lockicon2 pointerdisabled"></i></a>
                        {% endif %}
                    </div>
                </div>

                <div class="card-body lesson-card">
                    <h4 class="card-title">{{lektion.title}} {{lektion.fin}}%</h4>
                    <div class="progress" style="height: 3px;">
                        <div class="progress-bar" role="progressbar" style="width: {{lektion.fin}}%" aria-valuenow="{{lektion.fin}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="card-text">{{lektion.fin}}% {{lektion.excerpt | raw}}</div>
                </div>
            </div>
            </div>

        {% endif %}
    {% endfor %}

    {% if limesurvey_status.limesurvey_id_after_training_id %}
    <div class="col col-sm-4 col-md-3 col-lg-3 col-xl-3">
        <div class="card lesson-card">
            <div class="ts-tile-head">

            <img id="{{lektion.title}}-image" class="card-img-top image-responsive" src="
                {% if lektion.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{lektion.imageurl}}
                {% endif %}" height="100vh" alt="logo" />
            </div>
            <div class="ts-start-training-box">
                <div class="div1">
                </div>

                <div class="ts-start-training-link">
                    {% if not limesurvey_status.limesurvey_id_after_training %}
                    <a href="{{ limesurvey_status.limesurvey_id_after_training_url }}" class="listheader" target="_blank"><i class="fas fa-external-link-square-alt lockicon lockicon2"></i></a>
                    {% else %}
                    <i class="fas fa-check-square lockicon lockicon2"></i>
                    {% endif %}
                </div>
            </div>

            <div class="card-body lesson-card">
                <h4 class="card-title">
                    {% if limesurvey_status.limesurvey_id_after_training_id %}
                    {% if not limesurvey_status.limesurvey_id_after_training %}
                    Umfrage "{{ limesurvey_status.limesurvey_id_after_training_title }}" ausfüllen!
                    {% else %}
                    Umfrage "{{ limesurvey_status.limesurvey_id_after_training_title }}" wurde ausgefüllt!
                    {% endif %}
                    {% endif %}
                </h4>
                <div class="progress" style="height: 3px;">
                    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="card-text">0% </div>
            </div>
        </div>
    </div>
    {% endif %}

    {% if limesurvey_status.limesurvey_id_after_training_check_id %}
    <div class="col col-sm-4 col-md-3 col-lg-3 col-xl-3">
        <div class="card lesson-card">
            <div class="ts-tile-head">

            <img id="{{lektion.title}}-image" class="card-img-top image-responsive" src="
                {% if lektion.imageurl is empty %}
                {{defaultimglink}}
                {% else %}
                {{lektion.imageurl}}
                {% endif %}" height="100vh" alt="logo" />
            </div>
            <div class="ts-start-training-box">
                <div class="div1">
                </div>

                <div class="ts-start-training-link">
                    {% if not limesurvey_status.limesurvey_id_after_training_check %}
                    <a href="{{ limesurvey_status.limesurvey_id_after_training_check_url }}" class="listheader" target="_blank"><i class="fas fa-external-link-square-alt lockicon lockicon2"></i></a>
                    {% else %}
                    <i class="fas fa-check-square lockicon lockicon2"></i>
                    {% endif %}
                </div>
            </div>

            <div class="card-body lesson-card">
                <h4 class="card-title">
                    {% if limesurvey_status.limesurvey_id_after_training_check_id %}
                    {% if not limesurvey_status.limesurvey_id_after_training_check %}
                    Umfrage "{{ limesurvey_status.limesurvey_id_after_training_check_title }}" ausfüllen!
                    {% else %}
                    Umfrage "{{ limesurvey_status.limesurvey_id_after_training_check_title }}" wurde ausgefüllt!
                    {% endif %}
                    {% endif %}
                </h4>
                <div class="progress" style="height: 3px;">
                    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="card-text">0% </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

{% if showZumKalenderButton and zumKalenderButtonUrl %}
<div class="mt-4">
    <a href="{{ zumKalenderButtonUrl }}" class="btn btn-primary">
        <i class="fas fa-calendar-alt mr-2"></i>{% if zumKalenderButtonLabel %}{{ zumKalenderButtonLabel }}{% else %}Zum Kalender{% endif %}
    </a>
</div>
{% endif %}
{% if contentPlacement == "bottom"%}
    {{content|raw}}
{% endif %}
