{% if currentFilters is not defined %}{% set currentFilters = app.request.attributes.get('_route_params')|merge(app.request.query.all) %}{% endif %}
{% if paginationPath is not defined %}{% set paginationPath = app.request.attributes.get('_route') %}{% endif %}
<div class="right-content__body">
  <div class="right-content__body-header justify-content-between d-flex gap-16px">
    <h1 class="mb-0">Golf clubs</h1>
    <a href="{{ path('app_admin_add_club') }}" class="ps-button-featured button-text">
      <span class="ps-button-featured__icon">
        <img src="{{ asset('images/admin/icons/icon-golf-club-add.svg') }}" alt="ProScore Logo">
      </span>
      <span>New club</span>
    </a>
  </div>
  <div class="right-content__body-filter ptb-24px">
    <div class="d-flex justify-content-between align-items-center mt-4">
      <div class="input-group input-group-search">
        <span class="input-group-text bg-white border-end-0">
          <img src="{{ asset('images/admin/icons/icon-search.svg') }}" alt="ProScore Logo">
        </span>
        <input type="search" name="search" class="form-control border-start-0" placeholder="Search" value="{{ search }}" data-path="{{ path(paginationPath, currentFilters|merge({page: 1, sort: sort, limit:limit})) }}" />
        <button class="js-search ps-button primary button-text align-self-end" data-path="{{ path(paginationPath, currentFilters|merge({page: 1, sort: sort, limit:limit})) }}" >SEARCH</button>
      </div>
      <div class="d-flex align-items-center gap-8px">
        <span>Show</span>
        <div class="kyoDropdown" data-dropdown-id="0">
          <button
            class="btn dropdown-toggle kyodropdown d-flex align-items-center gap-2"
            type="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <span class="kyodropdown__text body" data-default="Type of Course">{{ limit }}</span>
            <img src="{{ asset('images/admin/icons/icon-chevron-down.svg') }}" alt="ProScore Logo">
          </button>
          <ul class="dropdown-menu kyodropdown__options body" style="">
            <li class="dropdown-item js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: 1, sort: sort, limit:5, search:search})) }}">5</li>
            <li class="dropdown-item js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: 1, sort: sort, limit:10, search:search})) }}">10</li>
            <li class="dropdown-item js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: 1, sort: sort, limit:20, search:search})) }}">20</li>
            <li class="dropdown-item js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: 1, sort: sort, limit:30, search:search})) }}">30</li>
          </ul>
        </div>
        <span>entries</span>
      </div>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table w-100 clubs-table table-rounded js-clubs-table">
      <thead class="proscreen-bg-light">
      <tr class="proscreen-black-4-text">
        <th class="club-col">
          <div class="d-flex gap-2 align-items-center">
            <span class="h4 mb-0">Club</span>
            {% if sort == 'name-asc' %}{% set nameSort = 'name-desc' %} {% else %} {% set nameSort = 'name-asc' %}{% endif %}
            <span class="js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: clubs.getCurrentPage, sort: nameSort, search:search, limit:limit})) }}">
              <img src="{{ asset('images/admin/icons/icon-sort.svg') }}" alt="ProScore Logo">
            </span>
          </div>
        </th>
        <th>
          <div class="d-flex align-items-center">
            <span class="h4">Telephone</span>
          </div>
        </th>
        <th class="h4">Status</th>
        <th class="h4">
          <div class="d-flex gap-2 align-items-center">
            <span>Date added</span>
            {% if sort == 'date_added-asc' %}{% set dateSort = 'date_added-desc' %} {% else %} {% set dateSort = 'date_added-asc' %}{% endif %}
            <span class="js-pagination" data-path="{{ path(paginationPath, currentFilters|merge({page: clubs.getCurrentPage, sort: dateSort, search:search, limit:limit})) }}">
              <img src="{{ asset('images/admin/icons/icon-sort.svg') }}" alt="ProScore Logo">
            </span>
          </div>
        </th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody id="tableBody" data-sort-order="desc">
        {% for club in clubs %}
          {%  include 'admin/partials/_club_table_row.html.twig' with {'club' : club }  %}
        {% endfor %}
      </tbody>

      <tfoot>
      {% if clubs.haveToPaginate %}

          {% include 'admin/partials/_club_pagination.html.twig' with {
            currentFilters: { search: search, sort: sort, limit:limit },
            currentPage: clubs.getCurrentPage,
            paginationPath: "app_admin_index",
            lastPage: clubs.getNbPages,
            showAlwaysFirstAndLast: true
          } only %}

      {% endif %}
      </tfoot>
    </table>
  </div>
</div>