<div class="modal fade" id="addLektionModal" tabindex="-1" role="dialog" aria-labelledby="addLektionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content ">
      <div class="modal-header">
        <h2 class="modal-title" id="addLektionModalLabel">Lektion hinzufügen</h2>
      </div>
      <div class="modal-body">
        <form id="modal-addlektionen-form">
            {% if training.title != "" %}
              <label>{{training.title}}:</label>
            {% endif %}
            <div class="" id="sortable-user-trainings-select-lektionen">
              {% if training.lektionsliste is not empty %}
                <div class="form-group">
                  <div class="input-group marginbottom10">
                    <input class="form-control" type="text" id="modal-addlektionen-input-search" value="" placeholder="Suche..." autocomplete="off"/>
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" id="clear-addlektionen-search-button" type="button"><i class="fas fa-trash-alt"></i></button>
                    </div>
                  </div>
                  <div id="modal-addlektionen-check-lektionen" class="card panel panel-default" style="height: 50vh; overflow-y: auto; padding: 9px;">
                    {% for lektion in training.lektionsliste %}
                    <div class="form-check d-flex align-items-center mb-2 pl-0">
                        <input class="modal-select-lektionen-input " type="checkbox" value="{{lektion.id}}" id="lektion-checkbox-{{lektion.id}}" name="{{lektion.title}}">
                        <label class="mb-0" for="lektion-checkbox-{{lektion.id}}">{{lektion.title}}</label>
                    </div>
                    {% endfor %}
                  </div>
                </div>
              {% else %}
                  <div class="alert alert-info" role="alert">
                      <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
                      <p>
                        Es wurden noch keine Lektionen angelegt.
                      </p>
                  </div>
              {% endif %}
              </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
        <button type="button" class="btn btn-primary addlektion" data-dismiss="modal" value="{{training.id}}">Bestätigen</button>
      </div>
    </div>
  </div>
</div>
<style>
  #sortable-user-trainings-select-lektionen label {
    margin-bottom: 0 !important;
  }
</style>