unb-mds/2023-2-Squad06

{% extends "base.html" %}

{% load crispy_forms_tags %}

{% block title %}Ranking{% endblock title %}

{% block head %}
  <style>
    .center-table {
      display: flex;
      justify-content: center;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0;
    }
    th, td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
{% endblock head %}

{% block content %}
  <h2>Ranking</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Rank</th>
        <th>User</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody>
      {% for user in page_obj %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td>
            <a href="{% url 'users:profile' user.username %}">
              {{ user.username }}
            </a>
          </td>
          <td>{{ user.score }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <nav aria-label="Page navigation example">
    <ul class="pagination">
      {% if page_obj.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page=1" tabindex="-1">First</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
        </li>
      {% endif %}

      {% for i in page_obj.paginator.page_range %}
        {% if page_obj.number == i %}
          <li class="page-item active">
            <a class="page-link" href="?page={{ i }}">{{ i }} </a>
          </li>
        {% else %}
          <li class="page-item">
            <a class="page-link" href="?page={{ i }}">{{ i }}</a>
          </li>
        {% endif %}
      {% endfor %}

      {% if page_obj.has_next %}
        <li class="page-item">
          <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-disabled="true">Next</a>
        </li>
      {% endif %}
    </ul>
  </nav>
{% endblock content %}