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

{% if contentPlacement == "top"%}
    {{content|raw}}
{% endif %}

<ul class="lektionliste keinlink">
    {% if limesurvey_status.limesurvey_id_before_training_id %}
        {% if not limesurvey_status.limesurvey_id_before_training_enabled %}
            {% set inactive_class = '' %}
            {% set inactive_class_lektionen = '' %}
        {% else %}
            {% set inactive_class = '' %}
            {% set inactive_class_lektionen = '' %}
        {% endif %}

        <li class="listitem {{inactive_class}}" style="background-color: #e2e2e2">
            {% if not limesurvey_status.limesurvey_id_before_training %}
            <a href="{{ limesurvey_status.limesurvey_id_before_training_url }}" class="listheader">
            {% else %}
            <div class="listheader">
            {% endif %}
                <p class="training-title" >
                    {% if limesurvey_status.limesurvey_id_before_training_id %}
                        {% if not limesurvey_status.limesurvey_id_before_training %}
                            {{ limesurvey_status.limesurvey_id_before_training_title }} – Bitte ausfüllen!<span class="percent-value" ><i class="fas fa-external-link-square-alt"></i></span>
                        {% else %}
                            {{ limesurvey_status.limesurvey_id_before_training_title }} – Wurde ausgefüllt!<span class="percent-value" ><i class="fas fa-check-square"></i></span>
                        {% endif %}
                    {% endif %}
                </p>
            {% if not limesurvey_status.limesurvey_id_before_training %}
            </a>
            {% else %}
            </div>
            {% endif %}
        </li>
    {% endif %}

    {% for lektion in lektion_overview_list %} 
    
    <div class="row" style="padding-bottom: 30px;">
        {% if lektion.imageurl is not empty %}
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <img class="img-responsive pull-left img-fluid" src="{{lektion.imageurl}}" alt="Beitragsbild zur Lektion {{lektion.title}}" >
        </div>
        {% endif %}
        <div class="{% if lektion.imageurl is not empty %}col-xs-12 col-sm-8 col-md-8 col-lg-8{% endif %}" style="padding-left: 15px; {% if lektion.imageurl is empty %}width: 100%{% endif %};{% if lektion.imageurl is empty %}padding-right: 15px;{% endif %}">
            <div>
                <p style="margin: 0px;">{{lektion.excerpt | raw}}</p> 
            </div>
        
      {% if (userlektionat == loop.index0 and usercontinue == true) or (userlektionat > loop.index0) %}
      <li class="listitem {{inactive_class_lektionen}}">
          {% if limesurvey_status.limesurvey_id_before_training_id %}
              {% if not limesurvey_status.limesurvey_id_before_training %}
                <div class="listheader" >
                    <p class="training-title" >
                      {{lektion.title}}
                      <span class="percent-value" >
                        {{lektion.fin}}%
                        <span>
                    </p>
                </div>
              {% else %}
                <a class="listheader" href="{{lektion.firstPageUrl}}">
                    <p class="training-title" >
                      {{lektion.title}}
                      <span class="percent-value" >
                        {{lektion.fin}}%
                        <span>
                    </p>
                </a>
              {% endif %}
          {% else %}
              <a class="listheader" href="{{lektion.firstPageUrl}}">
                  <p class="training-title" >
                      {{lektion.title}}
                      <span class="percent-value" >
                            {{lektion.fin}}%
                      <span>
                  </p>
              </a>
          {% endif %}
        <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>
      {% else %}
      <li class="listitem pointerdisabled">
        <a class="listheader pointerdisabled" href="#">
            <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>
      {% endif %}
      </div>

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

    {% if limesurvey_status.limesurvey_id_after_training_id %}
        {% if not limesurvey_status.limesurvey_id_after_training_enabled %}
            {% set inactive_class = '' %}
            {% set inactive_class_lektionen = '' %}
        {% else %}
            {% set inactive_class = '' %}
            {% set inactive_class_lektionen = '' %}
        {% endif %}

        <li class="listitem {{inactive_class}}" style="background-color: #e2e2e2">
            {% if not limesurvey_status.limesurvey_id_after_training and limesurvey_status.limesurvey_id_after_training_enabled %}
            <a href="{{ limesurvey_status.limesurvey_id_after_training_url }}" class="listheader">
            {% else %}
            <div class="listheader">
            {% endif %}
                <p class="training-title" >
                    {% if limesurvey_status.limesurvey_id_after_training_id %}
                        {% if not limesurvey_status.limesurvey_id_after_training %}
                            {{ limesurvey_status.limesurvey_id_after_training_title }} – Bitte ausfüllen!<span class="percent-value" ><i class="fas fa-external-link-square-alt"></i></span>
                        {% else %}
                            {{ limesurvey_status.limesurvey_id_after_training_title }} – Wurde ausgefüllt!<span class="percent-value" ><i class="fas fa-check-square"></i></span>
                        {% endif %}
                    {% endif %}
                </p>
            {% if not limesurvey_status.limesurvey_id_after_training and limesurvey_status.limesurvey_id_after_training_enabled %}
            </a>
            {% else %}
            </div>
            {% endif %}
        </li>
    {% endif %}

    {% if limesurvey_status.limesurvey_id_after_training_check_id %}
        {% if not limesurvey_status.limesurvey_id_after_training_check_enabled %}
            {% set inactive_class = '' %}
            {% set inactive_class_lektionen = '' %}
        {% else %}
            {% set inactive_class = '' %}
            {% set inactive_class_lektionen = '' %}
        {% endif %}

        <li class="listitem {{inactive_class}}" style="background-color: #e2e2e2">
            {% if not limesurvey_status.limesurvey_id_after_training_check and limesurvey_status.limesurvey_id_after_training_check_enabled %}
            <a href="{{ limesurvey_status.limesurvey_id_after_training_check_url }}" class="listheader">
            {% else %}
            <div class="listheader">
            {% endif %}
                <p class="training-title" >
                    {% if limesurvey_status.limesurvey_id_after_training_check_id %}
                        {% if not limesurvey_status.limesurvey_id_after_training_check %}
                            {{ limesurvey_status.limesurvey_id_after_training_check_title }} – Bitte ausfüllen!<span class="percent-value" ><i class="fas fa-external-link-square-alt"></i></span>
                        {% else %}
                            {{ limesurvey_status.limesurvey_id_after_training_check_title }} – Wurde ausgefüllt!<span class="percent-value" ><i class="fas fa-check-square"></i></span>
                        {% endif %}
                    {% endif %}
                </p>
            {% if not limesurvey_status.limesurvey_id_after_training_check and limesurvey_status.limesurvey_id_after_training_check_enabled %}
            </a>
            {% else %}
            </div>
            {% endif %}
        </li>
    {% endif %}

</ul>

{% 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 %}

<style>
    .inactive {
        background-color: #ffffff !important;
    }
    .lektionliste li {
        margin-top: 0;
    }
    img {
        height: auto;
    }
    .alert-warning {
        margin: 15px;
        width: 100%;
    }
</style>