<li class="ui-state-default mylist" id="training{{training.id}}" value="{{training.id}}">
  <div class="listheader-sortable">
    <!-- <span class="ui-icon ui-icon-carat-2-n-s sortable-icon"></span> -->
    <i class="fas fa-stream"></i>
    <span class="listheader-sortable-text">{{training.title}} (ID: {{training.id}})</span>
    <span title="Training entfernen" class="clear-user-training" role="button">
      <span>
        <i aria-hidden="true" class="far fa-minus-square" data-toggle='modal' data-target='#removeTrainingModal'></i>
      </span>
    </span>
  </div>
  <div class="form-check pl-0 checkautotraining d-flex justify-content-between mb-3">
    
    <label class="form-check-label radio-label mb-0 {% if training.lektionsliste|first.getTrainingAuto == "0" or ( training.lektionsliste|first.getTrainingAuto != "0"
    and training.lektionsliste|first.getTrainingAuto != "1" and training.lektionsliste|first.getTrainingAuto != "2")%}selected{% endif %}" for="{{training.id}}-art0">
      <input class="form-check-input radio-element trainingsart-radio" type="radio" name="trainingsart-{{training.id}}" id="{{training.id}}-art0" value="0" 
      {% if training.lektionsliste|first.getTrainingAuto == "0" or ( training.lektionsliste|first.getTrainingAuto != "0"
      and training.lektionsliste|first.getTrainingAuto != "1" and training.lektionsliste|first.getTrainingAuto != "2")%}checked{% endif %}>
      <span class="label-head">Individuell</span>
    </label>

    <label class="form-check-label radio-label mb-0 {% if training.lektionsliste|first.getTrainingAuto == "1" %}selected{% endif %}" for="{{training.id}}-art1">
      <input class="form-check-input radio-element trainingsart-radio" type="radio" name="trainingsart-{{training.id}}" id="{{training.id}}-art1" value="1" 
      {% if training.lektionsliste|first.getTrainingAuto == "1" %}checked{% endif %}>
      <span class="label-head">Sequentiell</span>
    </label>
    
    <label class="form-check-label radio-label mb-0 {% if training.lektionsliste|first.getTrainingAuto == "2" %}selected{% endif %}" for="{{training.id}}-art2">
      <input class="form-check-input radio-element trainingsart-radio" type="radio" name="trainingsart-{{training.id}}" id="{{training.id}}-art2" value="2" 
      {% if training.lektionsliste|first.getTrainingAuto == "2" %}checked{% endif %}>
      <span class="label-head">Begleitet</span>
    </label>
    
    {# NOT IN USE
      <label class="form-check-label radio-label mb-0 {% if training.lektionsliste|first.getTrainingAuto == "3" %}selected{% endif %}" for="{{training.id}}-art3">
      <input class="form-check-input radio-element trainingsart-radio" type="radio" name="trainingsart-{{training.id}}" id="{{training.id}}-art3" value="3" 
      {% if training.lektionsliste|first.getTrainingAuto == "3" %}checked{% endif %}>
      <span class="label-head">Intervall</span>
    </label>#}
    <span class="my-auto d-flex info-trainingsmodus" role="button" title="Informationen zu den Trainingsmodi" data-toggle="modal" data-target="#training-mgr-info-modal">
      <i aria-hidden="true" class="far fa-question-circle"></i>
    </span>
  </div>
  <div class="border p-2 mb-2 training-optionen">
    <p class="mt-0 mb-1">Optionen</p>
    {#<div id="intervall-{{training.id}}-art3" class="d-none justify-content-between mb-3 settings-intervall">
      <p class="mb-0 my-auto">Lektionen alle</p>
      <select class="custom-select w-25">
        <option selected="">7</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <select class="custom-select w-25">
        <option selected="">Tage</option>
        <option value="1">Wochen</option>
        <option value="2">Monate</option>
      </select>
      <p class="mb-0 my-auto">zuweisen</p>
    </div>#}
    <div class="form-check mb-2 py-1 d-flex align-items-center">
      <input type="checkbox" class="form-check-input checkbox-coaching" id="e-coaching{{training.id}}"
        name="e-coaching{{training.id}}" {%if coachingmode==1 or coachingmode==2%}checked{%endif%} {%if
        coachingmode==2%}disabled{%endif%}>
      <label class="form-check-label checkbox-coaching-label font-size-small ml-1 text-color-black"
        for="e-coaching{{training.id}}">E-Coaching aktivieren</label>
        <span id="{{training.id}}hinweis-keine-checks" class="d-none text-danger">Hinweis: Die Benachrichtigung an den E-Coach ist für alle Lektionen ausgeschaltet.</span>
    </div>
    <button class="btn btn-primary training-mgr-reset-coachingmodeformentry-button" type="button"
      title="Durch Coachingmodus-Formular gesetzte Sperre für dieses Training zurücksetzen." value="{{training.id}}">
      Unlock Coaching-Modus <i aria-hidden="true" class="ml-1 fas fa-unlock-alt"></i>
    </button>
    <span class="small d-inline-block text-color-black">Mit dieser Option kann das Formular zum selbstgewählten
      E-Coaching zurückgesetzt werden.</span>
    <div class="form-check d-flex align-items-center mt-3">
      <input type="radio" name="coach-user-training-mgr-forward" id="coach-user-training-mgr-forward-{{training.id}}" value="{{training.id}}" class="form-check-input coach-user-training-mgr-forward" {% if redirectTraining == training.id %}checked{% endif %}>
      <label for="coach-user-training-mgr-forward-{{training.id}}" class="form-check-label">Weiterleitung nach Login zu {{ training.title }}</label>
    </div>
    <div class="form-check d-flex align-items-center mt-3">
      <input type="checkbox" id="coach-user-training-mgr-enable-{{training.id}}" value="{{training.id}}" class="form-check-input coach-user-training-mgr-enable" {% if training.trainingEnabled() or trainingEnable or is_vorlage %}checked{% endif %} {% if is_vorlage %} disabled {% endif %}>
      <label for="coach-user-training-mgr-enable-{{training.id}}" class="form-check-label">Training aktivieren</label>
    </div>
  </div>
  <span class="morelessons">
    <span>{{training.lektioncount()}} Lektionen</span>
    <i class="far fa-caret-square-down" role="button"></i>
    <i class="far fa-caret-square-up" role="button"></i>
  </span>
  <div class="lektionen-show-hide">
    <ul class="connectedSortable ui-sortable">
      {% for lektion in training.lektionsliste %}
      <li class="ui-state-default training-mgr-lektionslite-item" value="{{lektion.id}}"><i
          class="fas fa-stream"></i>{{lektion.title}}
        <span class="ui-icon ui-icon-carat-2-n-s sortable-icon"></span>
        <span title="Lektion entfernen" role="button" class="clear-user-lektion">
          <i class="far fa-minus-square"></i>
        </span>   
        <div class="form-check mt-2 py-1 align-items-center e-coaching-lektion{{training.id}} {% if coachingmode==2 %} d-flex {% else %} d-none {% endif %}">
          <input type="checkbox" class="form-check-input checkbox-coaching-lektion checkbox-coaching-lektion-{{ training.id }}" id="e-coaching-lektion{{lektion.id}}"
            name="e-coaching-lektion{{lektion.id}}" {%if lektion.getTrainingAuto() == 2%}checked{%endif%} {% if loop.first %}disabled checked{% endif %}>
          <label class="form-check-label checkbox-coaching-lektion-label font-size-small ml-1 text-color-black"
            for="e-coaching-lektion{{lektion.id}}">E-Coach nach Fertigstellung benachrichtigen</label>
        </div>
      </li>
      {% endfor %}
    </ul>
    <!-- <div class="add-lektionen-wrap btn btn-primary"> -->
    <div class="w-100 text-center">
      <button class="addbutton-training-lektion btn btn-primary">
        <i class="far fa-plus-square"></i>Lektion hinzufügen
      </button>
    </div>
    <!-- </div> -->
  </div>
</li>

<script>
 
  jQuery('.trainingsart-radio').on("change", function () {
    jQuery('#{{training.id}}-art3').is(":checked") ? jQuery("#intervall-{{training.id}}-art3").addClass("d-flex") : jQuery("#intervall-{{training.id}}-art3").removeClass("d-flex");
  });
  
  jQuery('input.trainingsart-radio[value="2"]').on("click", function () {
    checkCoaching(jQuery(this));
    jQuery('.checkbox-coaching-lektion-{{training.id}}').prop("checked", true);
  })

  jQuery('input.trainingsart-radio[value="1"] , input.trainingsart-radio[value="0"], input.trainingsart-radio[value="3"]').on("click", function () {
    unCheckCoaching(jQuery(this));
  })

  function checkCoaching(thisObj) {
    thisObj.parent().parent().next().find(".checkbox-coaching").prop('checked', true);
    thisObj.parent().parent().next().find(".checkbox-coaching").prop('disabled', true);
  }

  function unCheckCoaching(thisObj) {
    thisObj.parent().parent().next().find(".checkbox-coaching").prop('disabled', false)
  }

  jQuery(document).ready(function () {
    var isChecked = jQuery('#e-coaching{{training.id}}').prop("checked");
    if (isChecked) {
      jQuery('#e-coaching{{training.id}}').addClass('manually-checked');
    }
    jQuery('#e-coaching{{training.id}}').on('click', function () {
      if (jQuery('#e-coaching{{training.id}}').hasClass('manually-checked')) {
        jQuery(this).removeClass('manually-checked');
        isChecked = false;
      } else {
        jQuery(this).addClass('manually-checked');
        isChecked = true;
      }
    });
    jQuery('.trainingsart-radio').on("change", function () {
      if (!isChecked && !jQuery('#{{training.id}}-art2').is(":checked")) {
        jQuery('#e-coaching{{training.id}}').prop("checked", false);
      }
      if(jQuery('#{{training.id}}-art2').is(":checked")){
        jQuery('.e-coaching-lektion{{training.id}}').addClass("d-flex");
      }else{
        jQuery('.e-coaching-lektion{{training.id}}').addClass("d-none");
        jQuery('.e-coaching-lektion{{training.id}}').removeClass("d-flex");
      }
    });
  });
</script>