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

{% 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" %}
<div class="row">
  <div class="col-12 col-lg-6 col-xl-6">
    <h2>1. Teilnehmende auswählen</h2>
    {% if users is empty %}
      <div class="alert alert-info" role="alert">
        <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
          Sie haben noch keinen Nutzer angelegt.
        </p>
      </div>
    {% endif %}
      <div id="training-mgr-user-side">
        <div class="input-group">
          <div class="input-group-btn input-group-prepend">
            <button id="training-mgr-clearsearch" data-toggle="tooltip" title="Suche zurücksetzen" aria-label="Suche zurücksetzen" class="btn btn-outline-secondary" type="button"><i aria-hidden="true" class="fas fa-trash-alt"></i></button>
          </div>
          <input id="autoCompleteInput" type="text" class="form-control" placeholder="Suche nach..." autocomplete="off">
          {% if selectuserid is not empty %}
          <script>
              jQuery(function() {
                  setTimeout(function(){
                      var name ="{% if canSeeUsername %}{{selectusername}}{% endif %}";
                      var id ="{{selectuserid}}";
                      var mail ="{% if not hideMails %}{{selectusermail}}{% endif %}";
                      var studienid = "{{selectstudienid}}";
                      var studiengruppenid = "{{selectstudiengruppenid}}";
                      var companyname = "{{selectcompany}}";

                      if(!mail) {
                        mail = "-";
                      }
                      
                      if(!name){
                        name = "-";
                      }

                      jQuery('#trainingmgr-select-user-first').parent().remove();

                      jQuery(".custom-table tbody").first().append("<tr class='custom-table-row-body'><th class='align-middle' valueid='"+id+"' scope='row'>"+id+"</th><td class='align-middle'>"+studienid+"</td><td class='align-middle'>"+studiengruppenid+"</td><td class='align-middle'>"+companyname+"</td><td class='align-middle'>"+name+"</td><td class='align-middle'>"+mail+"</td><td class='align-middle'><span role='button' title='Teilnehmenden entfernen' aria-label='Teilnehmenden entfernen' class='custom-table-remove-item cursor-pointer'><i aria-hidden='true' class='far fa-minus-square'></i></span></td><td class='align-middle'>&nbsp;</td></tr>");
                      jQuery('.custom-table tbody tr').first().find(".custom-table-remove-item").removeClass('cursor-pointer').addClass('pointerdisabled');
                      getTrainingByUser(jQuery('.custom-table tbody tr').first().find("th").first().attr("valueid"));
                  },100);

              });
          </script>
          {% endif %}
        </div><!-- /input-group -->
        <div class="border position-absolute" style="width: calc(100% - 30px);z-index: 999">
          <div id="autoCompleteInnerDiv" class="d-none w-100" style="overflow-x: hidden; overflow-y: scroll; max-height: 500px; z-index: 999; background-color: white">
            <ul class="list-group list-group-flush">
              {% for user in users %}
                <li class="list-group-item py-1 d-flex align-items-stretch flex-lg-row flex-column justify-content-lg-between cursor-pointer adduser" 
                  data-userid="{{user.id}}" data-usermail="{% if not hideMails %}{{user.mail}}{% endif %}" 
                  data-studienid="{{user.studienid}}" data-username="{% if canSeeUsername %}{{user.name}}{% endif %}">
                  {% if hideMails and canSeeUsername %}
                    <div class="w-100 d-flex justify-content-between align-items-center">
                      <b>{{user.name}} (ID: {{ user.id }})</b>
                      <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ user.studienid }}</span></h4>
                    </div>
                  {% elseif not hideMails and canSeeUsername %}
                    <div class="w-100 d-flex flex-column">
                      <b>{{user.name}} (ID: {{ user.id }})</b>
                      <small>{{user.mail}}</small>
                    </div>
                    <div class="d-flex align-items-center mb-1 mb-lg-0">
                      <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ user.studienid }}</span></h4>
                    </div>
                  {% elseif not hideMails and not canSeeUsername %}
                    <div class="w-100 d-flex flex-column">
                      <b>ID: {{ user.id }}</b>
                      <small>{{user.mail}}</small>
                    </div>
                    <div class="d-flex align-items-center mb-1 mb-lg-0">
                      <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ user.studienid }}</span></h4>
                    </div>
                  {% elseif hideMails and not canSeeUsername %}
                    <div class="w-100 d-flex justify-content-between align-items-center">
                      <b>ID: {{ user.id }}</b>
                      <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ user.studienid }}</span></h4>
                    </div>
                  {% endif %}
                </li>
              {% endfor %}
              {% for sg_name, sg in studiengruppen %}
                {% set show_sg = false %}
                {% for userid in sg %}
                  {% for user in users %}
                    {% if userid == user.id %}
                      {% set show_sg = true %}
                    {% endif %}
                  {% endfor %}
                {% endfor %}
                {% if show_sg %}
                  <li class="list-group-item py-1 d-flex align-items-stretch flex-lg-row flex-column justify-content-lg-between cursor-pointer addstudiengruppe"
                    data-studiengruppe="{{ sg_name }}" data-studiengruppenteilnehmer="{{sg|join(',') }}">
                    <div class="w-100 d-flex flex-column">
                      <b><i>Studiengruppe</i></b>
                      <small>{{ sg|length }} Nutzende(r)</small>
                    </div>
                    <div class="d-flex align-items-center mb-1 mb-lg-0">
                      <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ sg_name }}</span></h4>
                    </div>
                  </li> 
                {% endif %}
              {% endfor %}
              {% for company in companies %}
                {% if company['all_users']|length > 0 %}
                  <li class="list-group-item py-1 d-flex align-items-stretch flex-lg-row flex-column justify-content-lg-between cursor-pointer addcompanytotrainingmgr"
                    data-companyname="{{ company['companyname'] }}" data-companyid="{{ company['companyid'] }}" data-company="true" data-companymember="{{ company['all_users']|join(',') }}">
                    <div class="w-100 d-flex flex-column">
                      <b><i>{{ global_company_name }}</i></b>
                      <small>{{ company['all_users']|length }} Nutzende(r)</small>
                    </div>
                    <div class="d-flex align-items-center mb-1 mb-lg-0">
                      <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ company['companyname'] }}</span></h4>
                    </div>
                  </li>
                  {% for groupid, groupname in company['groups'] %}
                    {% if company['users'][groupid]|length > 0 %}
                      <li class="list-group-item py-1 d-flex align-items-stretch flex-lg-row flex-column justify-content-lg-between cursor-pointer addcompanytotrainingmgr"
                        data-companyname="{{ company['companyname'] }} - {{ groupname }}" data-companyid="{{ company['companyid'] }}" data-company="false" data-companymember="{{ company['users'][groupid]|join(',') }}">
                        <div class="w-100 d-flex flex-column">
                          <b><i>{{ global_company_name }} - Gruppe</i></b>
                          <small>{{ company['users'][groupid]|length }} Nutzende(r)</small>
                        </div>
                        <div class="d-flex align-items-center mb-1 mb-lg-0">
                          <h4 class="m-0 mb-1"><span class="badge badge-secondary">{{ company['companyname'] }} - {{ groupname }}</span></h4>
                        </div>
                      </li>
                    {% endif %}
                  {% endfor %}
                {% endif %}
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <table class="custom-table table mt-2">
          <thead>
            <tr class="custom-table-row-header">
              <th class="align-middle" scope="col">ID</th>
              <th class="align-middle" scope="col">Studien-TN-ID</th>
              <th class="align-middle" scope="col">Gruppen-ID</th>
              <th class="align-middle" scope="col">{{ global_company_name }}</th>
              <th class="align-middle" scope="col">User-Name</th>
              <th class="align-middle" scope="col">E-Mail</th>
              <th class="align-middle" scope="col"><i aria-hidden="true" class="fas fa-user-minus"></i><span class="sr-only">Teilnehmenden entfernen</span></th>
              <th class="align-middle" scope="col">&nbsp;<span class="sr-only">Status</span></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td id="trainingmgr-select-user-first" colspan="8">
                <div class="alert alert-info" role="alert">
                  <h4 class="m-0 mb-2"><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Info</h4>
                  <p class="mb-0">
                    Wählen Sie Nutzer über die Suche aus. Verwenden Sie hierfür nach dem Klicken in das Textfeld die Pfeiltasten <span class="sr-only">Pfeiltaste nach oben</span> <i aria-hidden="true" class="fas fa-caret-square-up d-inline"></i> und <span class="sr-only">Pfeiltaste nach unten</span> <i aria-hidden="true" class="fas fa-caret-square-down"></i> und Enter oder scrollen und klicken Sie auf den ensprechenden Nutzer, um eine Auswahl zu treffen.
                  </p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <button type="button" class="btn btn-secondary cleartable">
        Auswahl zurücksetzen
      </button>
      <br><br>
      <div id="master-alert-text" class="alert alert-info d-none" role="alert">
        <h5><i aria-hidden="true" class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
        <p>
          Zuweisungen funktionieren nach dem <span class="badge badge-secondary">Main</span>-<span class="badge badge-secondary">Following</span>-Prinzip.<br>
          Beim Speichern wird allen Nutzenden die Zusammenstellung des <span class="badge badge-secondary">Main</span>-Users übertragen. Die zuvor hinterlegten Einstellungen und Trainingszuweisungen der <span class="badge badge-secondary">Following</span>-User werden dabei überschrieben. Bei zeitlicher Zuweisung ist folglich zu beachten, dass damit auch ein aktuell freigegebenes Training entzogen werden kann und erst zukünftig wieder freigegeben wird, wenn dies über den <span class="badge badge-secondary">Main</span>-User so hinterlegt wird. 
        </p>
      </div>
    </div><!-- /.col-lg-6 -->

    <div class="col-12 col-lg-6 col-xl-6">
      <h2>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>
    <ul id="sortable-user-trainings" class="ts-frontend-list">

    </ul>

    <div class="d-flex justify-content-between flex-column flex-md-row">    
      <button type="button" id="coach-user-savetraining" class="btn btn-primary savetraininguser mt-3 mt-md-0" disabled>
        Trainings speichern <i aria-hidden="true" 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 type="button" id="coach-user-resettraining" class="btn btn-primary resettraininguser mt-3 mt-md-0">
        Trainings zurücksetzen
      </button>#}
      <!-- Button trigger modal training   addtrainingbutton savetraininguser-->
      <button type="button" id="coach-user-addtrainingbutton" class="btn btn-primary float-right addtrainingbutton mt-3 mt-md-0" disabled>
        Training hinzufügen
      </button>
    </div>
    <div id="coach-user-training-mgr-training-unique-alert" class="alert alert-warning mt-3 d-none" role="alert">
      <h5><i aria-hidden="true" class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
      <p>
          Ein Training kann einem Nutzer nur einmal zugewiesen werden.<br>
          Bitte passen Sie Ihre Auswahl an.
      </p>
    </div>
    <div id="coach-user-training-mgr-deletedDependentTrainingWarning" class="alert alert-warning mt-3 d-none" role="alert">
      <h5><i aria-hidden="true" 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>
    <br><br>
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<!-- Modal lektionen temp-->
<div id="lektionsmodal"></div>
<div id="training-mgr-datedep-edit-modal-area"></div>


<style>
.custom-table tbody tr:nth-child(2) {
  border-top: 3px solid #BDBDBD;
}

.custom-table.table thead th{
  border-top: none!important;
}
</style>