<!-- Button trigger modal training -->
{% if onlylist == false %}
{% include "vorlagen-user-mgr/vorlagen-user-mgr-add-user.html" with {'trainers' : trainers } %}
{% include "vorlagen-user-mgr/vorlagen-user-mgr-delete-user.html" %}

{% include "coach-user-training-mgr/coach-user-training-mgr-training-modal.html" with {'training': training} %}
{% include "coach-user-training-mgr/coach-user-training-mgr-remove-training-modal.html" %}

<h1 class="text-center mb-5">{{ heading }}</h1>

<div class="row">
  <div class="col-12 col-md-6 col-lg-6">
    <h2>1. Vorlage auswählen</h2>
    <div class="input-group">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary vorlagenusers-clear-search-button" id="vorlagenusers-clear-search-button" type="button" data-toggle="tooltip" title="Suche zurücksetzen"><i aria-hidden="true" class="fas fa-trash-alt"></i></button>
      </div>
      <input class="form-control vorlagenusers-search" type="text" id="vorlagenusers-search" value="" placeholder="Suche..." />
    </div>
    <div class="table-responsive">
      <table class="custom-table table vorlagenusertable">
        <caption class="sr-only">Vorlagen</caption>
        <thead>
          <tr class="custom-table-row-header">
            <th scope="col">Vorlage</th>
            <th scope="col">Coach</th>
            <th scope="col"><span class="sr-only">Bearbeiten</span></th>
            <th scope="col"><span class="sr-only">Löschen</span></th>
          </tr>
        </thead>
        <tbody>
          {% include "vorlagen-user-mgr/vorlagen-user-mgr-userlist.html" with {'users': users, 'onlylist': onlylist} %}
        </tbody>
      </table>
    </div>
    <button type="button" class="btn btn-primary add-vorlagenuser" data-toggle="modal"
      data-target="#addvorlagenuserModal">
      Vorlage hinzufügen
    </button>
  </div><!-- /.col-lg-6 -->

  <div class="col-12 col-md-6 col-lg-6">
    <hr class="d-md-none mt-4">
    <h2 class="mt-4 mt-md-0">2. Trainings zusammenstellen</h2>
    <button id="training-mgr-loading" class="d-none btn btn-link btn-block"><span class="userfeedback-loading"><i
          class="fas fa-spinner"></i></span></button>
    <div id="training-mgr-notrainings" class="d-none alert alert-info" role="alert">
      <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
      <p>
        Dieser Benutzer hat noch keine Trainings.
      </p>
    </div>
    <ul id="sortable-user-trainings">
    </ul>
    <div class="d-flex justify-content-between flex-column flex-md-row">    
      <!-- savetrainingvorlagenuser -->
      <button id="savetrainingvorlagenuser" type="button" class="btn btn-primary savetrainingvorlagenuser mt-3 mt-md-0" disabled>
        Trainings speichern <i class="fas fa-save ml-1" class="d-none"></i>
      </button>
      <button type="button" id="coach-user-savetraining-date" data-toggle="modal" data-target="#training-mgr-date-modal" class="btn btn-primary savetraininguserdate mt-3 mt-md-0 mx-0 mx-md-3" disabled>
        Terminzuweisung erstellen
      </button>
      <!-- Button trigger modal training -->
      <button id="vorlagenuseraddtrainingbutton" type="button" class="float-right btn btn-primary addtrainingbutton mt-3 mt-md-0" disabled>
        Training hinzufügen
      </button>
    </div>
    <div id="coach-user-training-mgr-deletedDependentTrainingWarning" class="alert alert-warning mt-3 d-none" role="alert">
      <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
      <p>
          Ein Training wurde entfernt, das für ein abhängig zugewiesenes Training relevant ist.<br>
          Bitte stellen Sie sicher, dass das abhängige Training zugewiesen werden kann.
      </p>
    </div>
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<style>
  .vorlagenuser-edit,
  .vorlagenuser-delete {
    cursor: pointer;
  }

  .custom-table-row-body td:nth-child(1),
  .custom-table-row-header th:nth-child(1) {
    text-align: left;
  }

  .vorlagenusertable>tbody>tr.active>td {
    background-color: #BDBDBD;
  }
</style>

<!-- Modal lektionen temp-->
<div id="lektionsmodal"></div>
<div id="updateVorlageModalArea"></div>
<div id="training-mgr-datedep-edit-modal-area"></div>
{% else %}
<div class="row">
  <div class="col-sm-6 col-md-6 col-lg-6">
    <h2>Vorlagenutzer</h2>

    <table class="custom-table table">
      <thead>
        <tr class="custom-table-row-header">
          <th scope="col">Vorlage</th>
          <th scope="col">Coach</th>
        </tr>
      </thead>
      <tbody>
        {% include "vorlagen-user-mgr/vorlagen-user-mgr-userlist.html" with {'users': users, 'onlylist': onlylist} %}
      </tbody>
    </table>
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

{% endif %}