From 50bcd89fcd453aed3988cc4d844ae597455e25a7 Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Tue, 3 Dec 2019 14:07:57 +0100
Subject: [PATCH] Code paginator style.

---
 .../musician/components/table_paginator.html  | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/musician/templates/musician/components/table_paginator.html b/musician/templates/musician/components/table_paginator.html
index 0bfef23..913d5ae 100644
--- a/musician/templates/musician/components/table_paginator.html
+++ b/musician/templates/musician/components/table_paginator.html
@@ -1,17 +1,36 @@
 {# <!-- table footer based paginator for ListView --> #}
+{% load i18n %}
+
 <tfoot>
     <tr>
         <td colspan="2">{{ page_obj.paginator.count }} items in total</td>
         <td class="text-center">
-            {% if page_obj.has_previous %}
-            <a href="?page=1&per_page={{ page_obj.paginator.per_page }}">&laquo;</a>
-            <a href="?page={{ page_obj.previous_page_number }}&per_page={{ page_obj.paginator.per_page }}">&lsaquo;</a>
-            {% endif %}
-            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
-            {% if page_obj.has_next %}
-            <a href="?page={{ page_obj.next_page_number }}&per_page={{ page_obj.paginator.per_page }}">&rsaquo;</a>
-            <a href="?page={{ page_obj.paginator.num_pages }}&per_page={{ page_obj.paginator.per_page }}">&raquo;</a>
-            {% endif %}
+            <nav aria-label="Page navigation">
+                <ul class="pagination justify-content-center">
+                    <li class="page-item {{ page_obj.has_previous|yesno:',disabled' }}">
+                        <a class="page-link" {% if page_obj.has_previous %}
+                            href="?page={{ page_obj.previous_page_number }}&per_page={{ page_obj.paginator.per_page }}"
+                            {% else %} href="#" {% endif %} tabindex="-1">
+                            <span aria-hidden="true">&lsaquo;</span>
+                            <span class="sr-only">{% trans "Previous" %}</span>
+                        </a>
+                    </li>
+                    {% for page_number in page_obj.paginator.page_range %}
+                    <li class="page-item {% if page_number == page_obj.number %}active {% endif %}">
+                        <a class="page-link"
+                            href="?page={{ page_number }}&per_page={{ page_obj.paginator.per_page }}">{{ page_number }}</a>
+                    </li>
+                    {% endfor %}
+                    <li class="page-item {{ page_obj.has_next|yesno:',disabled' }}">
+                        <a class="page-link" {% if page_obj.has_next %}
+                            href="?page={{ page_obj.next_page_number }}&per_page={{ page_obj.paginator.per_page }}"
+                            {% else %} href="#" {% endif %}>
+                            <span aria-hidden="true">&rsaquo;</span>
+                            <span class="sr-only">{% trans "Next" %}</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
         </td>
         <td colspan="2" class="text-right">
             <form method="get">