<h4 class="mb-3">Mir zugewiesene Teilnehmende</h4>

<div class="row mb-3 d-flex align-items-center">
  <div class="col-4 pr-0">
    <div class="input-group">
      <select class="custom-select" id="coaching_overview_search_user_column" size="1">
        {% for key, value in searchableColumns %}
          <option value="{{ key }}" {% if column == key %}selected{% endif %}>{{ value }}</option>
        {% endfor %}
      </select>
      <input class="form-control" id="coaching_overview_search_user_input" type="text" value="{{search}}" placeholder="Suchen...">
    </div>
  </div>
  <div class="col-4 d-flex">
    <button id="coaching_overview_search_user_btn" class="btn btn-primary mr-1" type="button" name="coaching_overview_search_user_btn">Suchen</button>
    {% if search is not empty %}
      <button id="coaching_overview_close_search_user_btn" class="btn btn-secondary" type="button" name="coaching_overview_close_search_user_btn">Suchen
        beenden</button>
    {% endif %}
  </div>
  <div class="col-4 text-right">
    <p class="mb-0">Insgesamt: {{usersLen}}</p>
  </div>
</div>

{% if usersLen > 0 %}
<div class="row">
  <div class="col-8">
    <nav>
      <ul class="pagination">
        {% if page != 1 %}
          <li class="page-item" value="{{ 1 }}">
            <a class="page-link" href="#" aria-label="First">
              <span aria-hidden="true">‹‹</span>
              <span class="sr-only">First</span>
            </a>
          </li>
          <li class="page-item" value="{{ page - 1 }}">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">‹</span>
              <span class="sr-only">Previous</span>
            </a>
          </li>
        {% endif %}
        {% for link in links %}
        <li class="page-item {% if page==link %} active {% endif %}" value="{{ link }}"><a href="#" class="page-link">{{
            link }}</a></li>
        {% endfor %}
        {% if page != lastPagePag %}
          <li class="page-item" value="{{ page + 1}}">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">›</span>
              <span class="sr-only">Next</span>
            </a>
          </li>
          <li id="last-page-pag" class="page-item" value="{{ lastPagePag }}">
            <a class="page-link" href="#" aria-label="Last">
              <span aria-hidden="true">&raquo;</span>
              <span class="sr-only">Last</span>
            </a>
          </li>
        {% else %}
          <input type="hidden" id="last-page-pag" value="{{ lastPagePag }}">
        {% endif %}
      </ul>
    </nav>
  </div>
  <div class="col-2 ml-auto">
    <form>
      <select class="float-right custom-select" name="coaching_overview_limit_records" id="coaching_overview_limit_records">
        {% for limit in arrayAllLimits %}
        <option value="{{ limit }}" {% if limit==rows %}selected{% endif %}>{{ limit }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>
{% endif %}

<div class="table-responsive">
  <table id="table" class="table-striped large-list table table-bordered table-hover" style="table-layout: auto;">
    <thead class="text-center">
      <tr>
        {% if showUserID %}
        <th class="col-1 hyphens-auto align-middle" data-field="userid" scope="col">ID</th>
        {% endif %}
        {% if showStudyID %}
        <th class="col-1 hyphens-auto align-middle" data-field="studienid" data-filter-control="input" id="studienid" scope="col">Studien-TN-ID</th>
        {% endif %}
        <th class="col-2 hyphens-auto align-middle" data-field="login" data-filter-control="input" id="login" scope="col">User-Name</th>
        {% if showTrainingsCoaching %}
        <th class="col-3 hyphens-auto align-middle" data-field="trainings" data-filter-control="input" id="trainings" scope="col">Trainings mit Coaching</th>
        {% endif %}
        {%if showLastLogin %}
        <th class="col-1 hyphens-auto align-middle" data-field="lastlogin" id="lastlogin" scope="col">Letzter Login</th>
        {% endif %}
        {% if showRegistrationDate %}
        <th class="col-1 hyphens-auto align-middle" data-field="registrationDate" id="registrationDate" scope="col">Registrierungsdatum</th>
        {% endif %}
        {% if showFeedbackStatus %}
        <th class="col-1 hyphens-auto align-middle" data-field="status" scope="col">Feedback-Status</th>
        {% endif %}
        {% if showUserActivity %}
        <th class="col-1 hyphens-auto align-middle" data-field="status" scope="col">Aktivität</th>
        {% endif %}
        {% if showNotes %}
        <th class="col-2 hyphens-auto align-middle" data-field="status" scope="col">Notizen</th>
        {% endif %}
      </tr>
    </thead>
    <tbody id="user-list-users" class="user-list-users-class" data-page="{{ page }}" data-url="{{ url }}">
      {% if users | length > 0 %}
      {% for user in users %}
      <tr user-id="{{user.getId()}}">
        {% if showUserID %}
        <td class="col-1"><span>{{user.getId()}}</span></td>
        {% endif %}
        {% if showStudyID %}
        <td class="col-1 hyphens-auto"><span>{% if user.getStudienid() is not empty %}{{user.getStudienid()}}{% else %}-{% endif %}</span></td>
        {% endif %}
        <td class="col-2 hyphens-auto"><span>{% if showUserDetails %}<a href="{{ detail_page_links[user.getId()] }}">{%
              endif %}{{user.getName()}}{% if showUserDetails %}</a>{% endif %}</span></td>
        {% if showTrainingsCoaching %}    
        <td class="col-3 ">
          {% for training in user.getTrainings() %}
          {% if loop.first %}
          {% if training.getId() != "" %}
          <span>{% if not training.getTrainingEnable() %}<i title="Training ist ausgeblendet" class="fas fa-eye-slash"></i> {% endif %}{{training.getTitle()}}&nbsp;({{training.getFin()}}%{% for lektion in training.lektionsliste %}{% if
            lektion.getFin() > 50 and lektion.getFin() < 100 and lektion.getTrainingAuto()==2 %} <small
              class="mb-0 highlight-color"><strong>{{lektion.getFin()}}% in
                Lektion&nbsp;{{loop.index}}</strong></small></span>{% endif %}{% if lektion.getTrainingAuto() == "2" and
          lektion.getFin() == 100 and lektion.isFeedback() !=1 %}&nbsp;<i
            class="fas fa-exclamation-circle highlight-color"></i>{% endif %}{% endfor %})</span>
          {% endif %}
          {% else %}
          {% if training.getId() != "" %}
          <span>, {% if not training.getTrainingEnable() %}<i title="Training ist ausgeblendet" class="fas fa-eye-slash"></i> {% endif %}{{training.getTitle()}}&nbsp;({{training.getFin()}}%{% for lektion in training.lektionsliste %}{% if
            lektion.getFin() > 50 and lektion.getFin() < 100 and lektion.getTrainingAuto()==2 %} <small
              class="mb-0 highlight-color"><strong>{{lektion.getFin()}}% in
                Lektion&nbsp;{{loop.index}}</strong></small></span>{% endif %}{% if lektion.getTrainingAuto() == "2" and
          lektion.getFin() == 100 and lektion.isFeedback() !=1 %}&nbsp;<i
            class="fas fa-exclamation-circle highlight-color"></i>{% endif %}{% endfor %})</span>
          {% endif %}
          {% endif %}
          {% endfor %}
        </td>
        {% endif %}
        {% if showLastLogin %}
        <td class="col-1 hyphens-auto p-1"><small>{% if user.lastlogin %} {{ user.lastlogin|date("d.m.Y H:i") }} Uhr {%
            else %} - {% endif %}</small></td>
        {% endif %}
        {% if showRegistrationDate %}
        <td class="col-1 hyphens-auto p-1"><small>{{user.registrationdate|date("d.m.Y H:i", "Europe/Berlin") }} Uhr</small></td>
        {% endif %}
        {% if showFeedbackStatus %}
        <td class="text-center col-1 hyphens-auto p-2">
          {% if user.status == null %}
          <div class="alert alert-success m-0 p-1"><i class="fas fa-check-circle"></i></div>
          {% else %}
          <div class="alert alert-danger m-0 p-1"><i class="fas fa-times-circle"></i><br><small>{{user.status}}</small>
          </div>
          {% endif %}
        </td>
        {% endif %}
        {% if showUserActivity %}
        <td class="text-center col-1 hyphens-auto p-2">
          {% if user.activity is null %}
          <div class="alert alert-secondary m-0 p-1"><i class="fas fa-question-circle"></i><br><small>Keine Daten vorhanden</small></div>
          {% elseif user.activity is same as(true) %}
          <div class="alert alert-success m-0 p-1"><i class="fas fa-check-circle"></i><br><small>Aktiv in den letzten {{ user.activityDays }} Tagen</small></div>
          {% elseif user.activity == "trainings finished" %}
          <div class="alert alert-success m-0 p-1"><i class="fas fa-check-circle"></i><br><small>Alle Trainings vollständig bearbeitet</small></div>
          {% elseif user.activity == "trainings not started" %}
          <div class="alert alert-warning m-0 p-1"><i class="fas fa-exclamation-circle"></i><br><small>Trainings noch nicht begonnen</small></div>
          {% elseif user.activity == "trainings not in progress" %}
          <div class="alert alert-info m-0 p-1"><i class="fas fa-info-circle"></i><br><small>Keine Trainings mit Coaching in Bearbeitung</small></div>
          {% else %}
          <div class="alert alert-danger m-0 p-1"><i class="fas fa-times-circle"></i><br><small>Inaktiv seit {{ user.getActivityFormatted() }}</small>
          </div>
          {% endif %}
        </td>
        {% endif %}
        {% if showNotes %}
        <td class="col-2 hyphens-auto p-2">
          <div class="form-group mb-0 text-right">
            <textarea class="form-control small" id="coaching_notes" rows="3"
              style="font-size: 1rem!important;">{% if coachingNotes[user.getId()] is not empty%}{{coachingNotes[user.getId()]|raw}}{% endif %}</textarea>
            <button type="submit" class="btn btn-sm btn-primary mt-2 p-1 coaching-overview-save-coaching-notes-button">Speichern</button>
          </div>
        </td>
        {% endif %}
      </tr>
      {% endfor %}
      {% else %}
      <tr>
        <td colspan="{{numberTableCells}}">
          <div class="alert alert-info mb-0" role="alert">
            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
              Keine Teilnehmenden vorhanden.
            </p>
          </div>
        </td>
        
      </tr>
      {% endif %}
    </tbody>
  </table>
</div>

{% if usersLen > 0 %}
<div class="row">
  <div class="col-8">
    <nav>
      <ul class="pagination">
        {% if page != 1 %}
          <li class="page-item" value="{{ 1 }}">
            <a class="page-link" href="#" aria-label="First">
              <span aria-hidden="true">‹‹</span>
              <span class="sr-only">First</span>
            </a>
          </li>
          <li class="page-item" value="{{ page - 1 }}">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">‹</span>
              <span class="sr-only">Previous</span>
            </a>
          </li>
        {% endif %}
        {% for link in links %}
        <li class="page-item {% if page==link %} active {% endif %}" value="{{ link }}"><a href="#" class="page-link">{{
            link }}</a></li>
        {% endfor %}
        {% if page != lastPagePag %}
          <li class="page-item" value="{{ page + 1}}">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">›</span>
              <span class="sr-only">Next</span>
            </a>
          </li>
          <li id="last-page-pag" class="page-item" value="{{ lastPagePag }}">
            <a class="page-link" href="#" aria-label="Last">
              <span aria-hidden="true">&raquo;</span>
              <span class="sr-only">Last</span>
            </a>
          </li>
        {% else %}
          <input type="hidden" id="last-page-pag" value="{{ lastPagePag }}">
        {% endif %}
      </ul>
    </nav>
  </div>
</div>
{% endif %}

<script>
jQuery(document).ready(function () {
  var url = jQuery(".user-list-users-class").attr("data-url");
  var limitRecords = jQuery('#coaching_overview_limit_records :selected').text();
  const queryString = window.location.search;
  
  jQuery(document).on('keydown', '#coaching_overview_search_user_input', function (e) {
    if(e.keyCode == 13) {
      jQuery('#coaching_overview_search_user_btn').click();
    }
  });

  jQuery(document).on('click', '#coaching_overview_search_user_btn', function (e) {
    var search = jQuery("#coaching_overview_search_user_input").val();
    var searchColumn = jQuery('#coaching_overview_search_user_column').val();
    if (search.length > 0) {
      const urlParams = new URLSearchParams(queryString);
      urlParams.set('page_pag', 1);
      urlParams.set('search', search);
      urlParams.set('column', searchColumn);
      setTimeout(() => {
        window.location.search = urlParams;
      }, 500);
    } else {
      setTimeout(() => {
        window.location.href = url;
      }, 500);
    }
  });
  
  jQuery(document).on('click', '#coaching_overview_close_search_user_btn', function (e) {
    var search = jQuery("#coaching_overview_search_user_input").val();
    setTimeout(() => {
      window.location.href = url;
    }, 100);
  });

  jQuery(document).on('click', '.page-item', function (e) {
    var limitRecords = jQuery('#coaching_overview_limit_records').val();
    var pageNumber = jQuery(this).val();
    var lastPagePag = jQuery('#last-page-pag').val();
    if (pageNumber > 0 && pageNumber <= lastPagePag) {
      const urlParams = new URLSearchParams(queryString);
      urlParams.set('rows', limitRecords);
      urlParams.set('page_pag', pageNumber);
      setTimeout(() => {
        window.location.search = urlParams;
      }, 100);
    }
  });

  jQuery(document).on('change', '#coaching_overview_limit_records', function () {
    var limitRecords = jQuery('#coaching_overview_limit_records :selected').text();
    const urlParams = new URLSearchParams(queryString);
    urlParams.set('rows', limitRecords);
    urlParams.set('page_pag', 1);
    setTimeout(() => {
      window.location.search = urlParams;
    }, 500);
  });
});
</script>