livegraphs-django/dashboard_project/templates/dashboard/partials/search_results_table.html

<!-- templates/dashboard/partials/search_results_table.html -->
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Session ID</th>
        <th>Start Time</th>
        <th>Data Source</th>
        <th>Country</th>
        <th>Language</th>
        <th>Sentiment</th>
        <th>Messages</th>
        <th>Category</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for session in page_obj %}
        <tr>
          <td>{{ session.session_id|truncatechars:10 }}</td>
          <td>{{ session.start_time|date:"M d, Y H:i" }}</td>
          <td>
            <a href="{% url 'data_source_detail' session.data_source.id %}" class="ajax-nav-link"
              >{{ session.data_source.name|truncatechars:15 }}</a
            >
          </td>
          <td>{{ session.country }}</td>
          <td>{{ session.language }}</td>
          <td>
            {% if session.sentiment %}
              {% if 'positive' in session.sentiment|lower %}
                <span class="badge bg-success">{{ session.sentiment }}</span>
              {% elif 'negative' in session.sentiment|lower %}
                <span class="badge bg-danger">{{ session.sentiment }}</span>
              {% elif 'neutral' in session.sentiment|lower %}
                <span class="badge bg-warning">{{ session.sentiment }}</span>
              {% else %}
                <span class="badge bg-secondary">{{ session.sentiment }}</span>
              {% endif %}
            {% else %}
              <span class="text-muted">N/A</span>
            {% endif %}
          </td>
          <td>{{ session.messages_sent }}</td>
          <td>{{ session.category|default:"N/A" }}</td>
          <td>
            {% if session.session_id %}
              <a
                href="{% url 'chat_session_detail' session.session_id %}"
                class="btn btn-sm btn-outline-primary"
              >
                <i class="fas fa-eye"></i>
              </a>
            {% else %}
              <button class="btn btn-sm btn-outline-secondary" disabled>
                <i class="fas fa-eye-slash"></i>
              </button>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="9" class="text-center">No chat sessions found matching your criteria.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if page_obj.paginator.num_pages > 1 %}
  <nav aria-label="Page navigation" class="mt-4" id="pagination-container">
    <ul class="pagination justify-content-center">
      {% if page_obj.has_previous %}
        <li class="page-item">
          <a
            class="page-link pagination-link"
            data-page="1"
            href="?{% if query %}q={{ query }}&{% endif %}{% if data_source %}data_source_id={{ data_source.id }}&{% endif %}page=1"
            aria-label="First"
          >
            <span aria-hidden="true">&laquo;&laquo;</span>
          </a>
        </li>
        <li class="page-item">
          <a
            class="page-link pagination-link"
            data-page="{{ page_obj.previous_page_number }}"
            href="?{% if query %}q={{ query }}&{% endif %}{% if data_source %}data_source_id={{ data_source.id }}&{% endif %}page={{ page_obj.previous_page_number }}"
            aria-label="Previous"
          >
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="First">
            <span aria-hidden="true">&laquo;&laquo;</span>
          </a>
        </li>
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
      {% endif %}
      {% for num in page_obj.paginator.page_range %}{% if page_obj.number == num %}
        <li class="page-item active">
          <a
            class="page-link pagination-link"
            data-page="{{ num }}"
            href="?{% if query %}q={{ query }}&{% endif %}{% if data_source %}data_source_id={{ data_source.id }}&{% endif %}page={{ num }}"
            >{{ num }}</a
          >
        </li>
      {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
        <li class="page-item">
          <a
            class="page-link pagination-link"
            data-page="{{ num }}"
            href="?{% if query %}q={{ query }}&{% endif %}{% if data_source %}data_source_id={{ data_source.id }}&{% endif %}page={{ num }}"
            >{{ num }}</a
          >
        </li>
      {% endif %}{% endfor %}
      {% if page_obj.has_next %}
        <li class="page-item">
          <a
            class="page-link pagination-link"
            data-page="{{ page_obj.next_page_number }}"
            href="?{% if query %}q={{ query }}&{% endif %}{% if data_source %}data_source_id={{ data_source.id }}&{% endif %}page={{ page_obj.next_page_number }}"
            aria-label="Next"
          >
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        <li class="page-item">
          <a
            class="page-link pagination-link"
            data-page="{{ page_obj.paginator.num_pages }}"
            href="?{% if query %}q={{ query }}&{% endif %}{% if data_source %}data_source_id={{ data_source.id }}&{% endif %}page={{ page_obj.paginator.num_pages }}"
            aria-label="Last"
          >
            <span aria-hidden="true">&raquo;&raquo;</span>
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Last">
            <span aria-hidden="true">&raquo;&raquo;</span>
          </a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endif %}