{% load static %}
<table class="uk-table uk-table-divider uk-table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% if page_obj and page_obj.object_list %}
      {% for feature in page_obj.object_list %}
        <tr>
          <td>{{ feature.feature_name }}</td>
          <td>{{ feature.feature_description|truncatewords:17 }}</td>
          <td>
            <button type="button" class="uk-button uk-button-primary uk-button-small" onclick="window.selectFeature('{{ feature.id }}','{{ feature.feature_name|escapejs }}')">
              Select
            </button>
          </td>
        </tr>
      {% endfor %}
    {% else %}
      <tr>
        <td colspan="3" class="uk-text-muted uk-text-center">No features found.</td>
      </tr>
    {% endif %}
  </tbody>
</table>

{% if page_obj %}
<ul class="uk-pagination uk-flex-center" hx-include="[name=q]">
  {% if page_obj.has_previous %}
    <li><a href="#" hx-get="?q={{ request.GET.q|urlencode }}&page=1" name="modal-feature-search-page">&laquo; First</a></li>
    <li><a href="#" hx-get="?q={{ request.GET.q|urlencode }}&page={{ page_obj.previous_page_number }}">Previous</a></li>
  {% else %}
    <li class="uk-disabled"><span>&laquo; First</span></li>
    <li class="uk-disabled"><span>Previous</span></li>
  {% endif %}
  <li class="uk-active"><span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
  {% if page_obj.has_next %}
    <li><a hx-get="?q={{ request.GET.q|urlencode }}&page={{ page_obj.next_page_number }}">Next</a></li>
    <li><a hx-get="?q={{ request.GET.q|urlencode }}&page={{ page_obj.paginator.num_pages }}">Last &raquo;</a></li>
  {% else %}
    <li class="uk-disabled"><span>Next</span></li>
    <li class="uk-disabled"><span>Last &raquo;</span></li>
  {% endif %}
</ul>
{% endif %}