<h1 class="text-center mb-5">{{ heading }}</h1>
<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="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="search_user_input" type="text" value="{{search}}" placeholder="Suchen...">
    </div>
  </div>
  <div class="col-4 d-flex">
    <button id="search_user_btn" class="btn btn-primary mr-1" type="button" name="search_user_btn">Suchen</button>
    {% if search is not empty %}
      <button id="close_search_user_btn" class="btn btn-secondary" type="button" name="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="limit-records" id="limit-records">
        {% for limit in arrayAllLimits %}
        <option value="{{ limit }}" {% if limit==rows %}selected{% endif %}>{{ limit }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>
{% endif %}
<div class="row">
  <div class="col-12">
    <div class="table-responsive">
      <table id="table" class="table-striped large-list" style="table-layout: auto;">
        <thead>
          <tr>
            <th class="col-1 hyphens-auto" data-field="userId" data-filter-control="input" id="userId" scope="col">ID</th>
            <th class="col-1 hyphens-auto" data-field="studienid" data-filter-control="input" id="studienid" scope="col"
              style="word-break: break-all !important;">Studien-TN-ID</th>
            <th class="col-2 hyphens-auto" data-field="login" data-filter-control="input" id="login" scope="col">User-Name</th>
            {% if showCompanyInformation %}
            <th class="col-1 hyphens-auto" data-field="group" data-filter-control="input" id="group" scope="col">{% if settings.user_grouper_name != '' %}{{ settings.user_grouper_name }}{% else %}Unternehmen{% endif %}&emsp;&emsp;</th>
            {% endif %}
            {% if not hideMails %}
            <th class="col-2 hyphens-auto" data-field="mail" data-filter-control="input" id="mail" scope="col">E-Mail-Adresse</th>
            {% endif %}
            <th class="col-4 hyphens-auto" data-field="trainings" data-filter-control="input" id="trainings" scope="col">Zugewiesene
              Trainings</th>
            <th class="col-1 hyphens-auto" data-field="lastlogin" id="lastlogin" scope="col">Letzter Login</th>
          </tr>
        </thead>
        <tbody id="user-list-users" class="user-list-users-class" data-page="{{ page }}" data-url="{{ url }}">
          {% for user in users %}
          <tr>
            <td class="col-1 hyphens-auto">{{ user.ID }}</td>
            <td class="col-1 hyphens-auto"><span>{{user.studienid}}</span></td>
            <td class="col-2 hyphens-auto"><span>{% if showUserDetails %}<a href="{{ detail_page_links[user.id] }}">{% endif
                  %}{{user.name}}{% if
                  showUserDetails %}</a>{% endif %}</span></td>
            {% if showCompanyInformation %}      
            <td class="col-1 hyphens-auto">
              {% for company in user.companys %}
              <span>{{company.title}}</span>
              {% endfor %}
            </td>
            {% endif %}
            {% if not hideMails %}
            <td class="col-2 hyphens-auto"><span>{{user.mail}}</span></td>
            {% endif %}
            <td class="col-3 hyphens-auto">
              {% for training in user.trainings %}
                {% if training.id != "" %}
                  <span>
                    {% if not training.getTrainingEnable() %}<i class="fas fa-eye-slash" title="Training ist ausgeblendet"></i>{% endif %}
                    {{training.title}}{% if not loop.last %},{% endif %}
                  </span>
                {% endif %}
              {% endfor %}
            </td>
            <td class="col-1 hyphens-auto"><span>{% if user.lastlogin %} {{ user.lastlogin|date("d.m.Y H:i") }} Uhr {% else %} - {% endif %}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% if usersLen > 0 %}
<div class="row">
  <div class="col-8">
    <nav class="mt-3">
      <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 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>
        {% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>


<script>
  jQuery(function () {
    var $table = jQuery('#table')
    jQuery('#table').bootstrapTable({
      formatNoMatches: function () {
        return '<div class="text-left alert alert-info mb-0">'+
                  '<h5 class="mt-0"><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>'+
                  '<p class="mb-0">Es wurden keine Ergebnisse zu Ihrer Suche gefunden.</p>'+
                '</div>';
    }
    });
  })
</script>

<script>
  jQuery(document).ready(function () {
    var url = jQuery(".user-list-users-class").attr("data-url");
    var limitRecords = jQuery('#limit-records :selected').text();
    const queryString = window.location.search;

    jQuery(document).on('keydown', '#search_user_input', function (e) {
      if(e.keyCode == 13) {
        jQuery('#search_user_btn').click();
      }
    });

    jQuery(document).on('click', '#search_user_btn', function (e) {
      var search = jQuery("#search_user_input").val();
      var searchColumn = jQuery('#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', '#close_search_user_btn', function (e) {
      var search = jQuery("#search_user_input").val();
      setTimeout(() => {
        window.location.href = url;
      }, 100);
    });

    jQuery(document).on('click', '.page-item', function (e) {
      var limitRecords = jQuery('#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', '#limit-records', function () {
      var limitRecords = jQuery('#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>

<style>
  .large-list .th-inner {
    /* width: 100px !important; */
    overflow: visible !important;
    white-space: normal !important;
  }

  #table th {
    vertical-align: middle;
    height: 100px;
    margin-right: 50px;
  }

  #table td {
    height: 50px;
  }
</style>