<div class="d-flex justify-content-between align-items-xl-center flex-column flex-md-row pagebuttons">

  <div class="btn-group mb-4 flex-row d-flex flex-column flex-md-row align-items-xl-center">
    {% if showLektionenButton %}
    <button onclick="submitCalendarFormsLek('{% if lektionenButtonUrl %}{{lektionenButtonUrl}}{% else %}{{training.url}}{% endif %}', {{ isSingleLesson|default(false) ? 'true' : 'false' }})" id="pagebuttons-lektionen-button" class=" btn btn-primary back px-3">
      <span class="submitlek d-xl-flex align-items-xl-center">
        {% if showCalendarIcon %}
        <i class="fas fa-calendar-alt mr-xl-1"></i>
        {% else %}
        <i class="fas fa-list mr-xl-1"></i>
        {% endif %}
        {% if lektionenButtonLabel %}{{lektionenButtonLabel}}{% else %}{{Lektionen_Text}}{% endif %}
      </span>
    </button>
    {% endif %}
    {% if current_page.index > 0 %}
      <button onclick="submitCalendarFormsBack('{{lektion.pages[current_page.index-1].url}}')" id="pagebuttons-back-button" class="mt-4 mt-md-0 {% if showLektionenButton %}ml-md-4{% endif %} btn btn-primary back px-3">
        <span class="submitback d-xl-flex align-items-xl-center">
          <i class="fas fa-chevron-left mr-xl-1"></i>
          zurück
        </span>
      </button>
    {% endif %}
  </div>

  {% if showPagination %}
  {% if navigationType == 'circle' %}
    <div class="btn-group mb-4 d-flex justify-content-center pagenavigation mx-xl-2" role="group">
      <div class="d-flex flex-row">
  {% elseif navigationType == 'bar' %}
    <div class="btn-group mb-4 d-flex justify-content-center flex-grow-1 px-4 pagenavigation mx-xl-2" role="group">
      <div class="d-flex flex-row w-100 justify-content-center">
  {% else %}
    <div class="btn-group mb-4 pagenavigation mx-xl-2" role="group">
  {% endif %}

    {% if navigationType == "fcl" %}

      {# First page #}
      <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
      {% if 0 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
      " onclick="submitCalendarFormsPage(this, '{{lektion.pages[0].url}}');">
        {% if 0 == current_page.index %}
          <span class="currentpage">1</span>
        {% else %}
          1
        {% endif %}
      </a>

      {% if current_page.index-2 > 0 %}
        {% if (current_page.index-2) == 1 %}
          <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
          {% if current_page.index-2 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
          " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index-2].url}}');">
              {{ current_page.index-1 }}
          </a>
        {% else %}
          <a class="btn btn-secondary paging d-flex justify-content-center align-items-center disabled 
          {% if current_page.index-2 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}" onclick="return false;" disabled>
              ...
          </a>
        {% endif %}
      {% endif %}

      {% if current_page.index-1 > 0 %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if current_page.index-1 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index-1].url}}');">
            {{ current_page.index }}
        </a>
      {% endif %}

      {% if current_page.index != 0 and current_page.index != (lektion.pages|length-1) %}
        {# Middle page #}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if current_page.index <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index].url}}');">
            <span class="currentpage">{{ current_page.index+1 }}</span>
        </a>
      {% endif %}

      {% if current_page.index+1 < lektion.pages|length and current_page.index+1 != lektion.pages|length-1 %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if current_page.index+1 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index+1].url}}');">
            {{ current_page.index+2 }}
        </a>
      {% endif %}

      {% if current_page.index+3 < lektion.pages|length %}
        {% if (current_page.index+3) == (lektion.pages|length)-1 %}
          <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
          {% if current_page.index+2 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
          " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index+2].url}}');">
              {{ current_page.index+3 }}
          </a>
        {% else %}
          <a class="btn btn-secondary paging d-flex justify-content-center align-items-center disabled 
          {% if current_page.index+2 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}" onclick="return false;" disabled>
              ...
          </a>
        {% endif %}
      {% endif %}
      
      {% if lektion.pages|length > 1 %}
        {# Last page #}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if (lektion.pages|length-1) <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[(lektion.pages|length-1)].url}}');">
          {% if (lektion.pages|length-1) == current_page.index %}
            <span class="currentpage">{{ lektion.pages|length }}</span>
          {% else %}
            {{ lektion.pages|length }}
          {% endif %}
        </a>
        {% endif %}
    {% elseif navigationType == "neighbors" %}

      {# First page #}
      {% if current_page.index > 1 %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if 0 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[0].url}}');">
          <i class="fas fa-angle-double-left"></i>
        </a>
      {% endif %}

      {% if current_page.index-1 >= 0 %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if current_page.index-1 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index-1].url}}');">
            {{ current_page.index }}
        </a>
      {% endif %}

      {# Middle page #}
      <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
      {% if current_page.index <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
      " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index].url}}');">
          <span class="currentpage">{{ current_page.index+1 }}</span>
      </a>

      {% if current_page.index+1 < lektion.pages|length and current_page.index != lektion.pages|length-1 %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if current_page.index+1 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[current_page.index+1].url}}');">
            {{ current_page.index+2 }}
        </a>
      {% endif %}

      {% if lektion.pages|length > 1 and current_page.index < lektion.pages|length-2 %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if (lektion.pages|length-1) <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{lektion.pages[(lektion.pages|length-1)].url}}');">
          <i class="fas fa-angle-double-right"></i>
        </a>
      {% endif %}

    {% elseif navigationType == 'circle' %}

      {% for page in lektion.pages %}
        <a class="btn btn-secondary paging-circle align-self-center p-0 {% if loop.index0 == current_page.index %} paging-circle-current {% endif %} d-flex justify-content-center align-items-center 
        {% if loop.index0 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{page.url}}');">&nbsp;
        </a>
      {% endfor %}

    {% elseif navigationType == 'bar' %}

      {% for page in lektion.pages %}
        <a class="btn btn-secondary paging-bar align-self-center p-0 {% if loop.index0 == current_page.index %} paging-bar-current {% endif %} d-flex justify-content-center align-items-center 
        {% if loop.index0 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %} {% if loop.index0 != 0 and loop.index0 != lektion.pages|length-1 %}paging-bar-middle{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{page.url}}');">&nbsp;</a>
      {% endfor %}

    {% elseif navigationType == 'dropdown' %}

      <div class="d-flex justify-content-center align-items-center">
        <p class="text-muted mb-0">Seite</p>
        <div class="btn-group dropup mx-2" id="trainingssystem-plugin-navbar-dropdown-wrapper">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
            <span class="mr-2">{{ (current_page.index+1) }}</span>
          </button>
          <div id="trainingssystem-plugin-navbar-dropdown" class="dropdown-menu overflow-auto p-0" style="max-height: 200px; min-width: unset;">
            {% for page in lektion.pages %}
              <a class="dropdown-item btn btn-secondary btn-block my-0 text-center paging {% if loop.index0 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}" onclick="submitCalendarDropdownFormsPage(event, this, '{{page.url}}');">
                  {% if loop.index0 == current_page.index %}
                  <span class="currentpage">{{loop.index}}</span>
                {% else %}
                  {{loop.index}}
                {% endif %}
              </a>
            {% endfor %}
          </div>
        </div>
        <p class="text-muted mb-0">von {{ lektion.pages|length }}</p>
      </div>

      <script>
        jQuery(document).ready(function ($) {
          jQuery('#trainingssystem-plugin-navbar-dropdown-wrapper').on('shown.bs.dropdown', function () {
            document.querySelector("#trainingssystem-plugin-navbar-dropdown").scrollTop = document.querySelector('#trainingssystem-plugin-navbar-dropdown .currentpage').offsetTop - 20;
          });
        });
      </script>

    {% else %}
      {% for page in lektion.pages %}
        <a class="btn btn-secondary paging d-flex justify-content-center align-items-center 
        {% if loop.index0 <= lektion.lastpageindex %}visited{% else %}unvisited{% endif %}
        " onclick="submitCalendarFormsPage(this, '{{page.url}}');">
          {% if loop.index0 == current_page.index %}
            <span class="currentpage">{{loop.index}}</span>
          {% else %}
            {{loop.index}}
          {% endif %}
        </a>
      {% endfor %}
    {% endif %}

    {% if navigationType == 'circle' or navigationType == 'bar' %}
      </div>
    {% endif %}
  </div>
  {% endif %}

  <div class="btn-group mb-4 flex-row d-flex flex-column flex-md-row align-items-xl-center" role="group">
    {% if lektion.pages|length > (current_page.index + 1) %}
      <!--weiter button -->
      <button onclick="submitCalendarFormsNext('{{lektion.pages[current_page.index+1].url}}',false)" id="pagebuttons-next-button" class="btn btn-primary px-3">
        <span class="submitnext d-xl-flex align-items-xl-center">
          weiter
          <i class="fas fa-chevron-right ml-xl-1"></i>
        </span>
      </button>
      <!--weiter button Ende -->
    {% else %}
      <!--abschließen button -->
      <button onclick="submitCalendarFormsNext('{% if abschliessenButtonUrl %}{{abschliessenButtonUrl}}{% else %}{{training.url}}{% endif %}',true, {{ isSingleLesson|default(false) ? 'true' : 'false' }})"  id="pagebuttons-next-button" class="btn btn-primary px-3">
        <span class="submitnext d-xl-flex align-items-xl-center">
          {% if abschliessenButtonLabel %}{{abschliessenButtonLabel}}{% else %}abschließen{% endif %}
          <i class="fas fa-chevron-right ml-xl-1"></i>
        </span>
      </button>
      <!--abschließen button Ende -->
    {% endif %}
  </div>
</div>


