From 5322f62cdf2059e2ceb7206e5c5fa7783203cf3f Mon Sep 17 00:00:00 2001
From: Santiago Lamora <slamora@users.noreply.github.com>
Date: Wed, 20 Nov 2019 17:09:08 +0100
Subject: [PATCH] Create paginator component as div and cols.

---
 .../musician/components/paginator.html        | 29 +++++++++++++++++++
 musician/templates/musician/databases.html    |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 musician/templates/musician/components/paginator.html

diff --git a/musician/templates/musician/components/paginator.html b/musician/templates/musician/components/paginator.html
new file mode 100644
index 0000000..9a7a406
--- /dev/null
+++ b/musician/templates/musician/components/paginator.html
@@ -0,0 +1,29 @@
+{# <!-- paginator component --> #}
+<div class="row object-list-paginator">
+    <div class="col-md-4">{{ page_obj.paginator.count }} items in total</div>
+    <div class="col-md-4 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 %}
+    </div>
+    <div class="col-md-4 text-right">
+        <form method="get">
+            Showing
+            <select name="{{ per_page_param }}">
+                {% for value in per_page_values %}
+                {% with page_obj.paginator.per_page as per_page %}
+                <option value="{{ value }}" {% if value == per_page  %}selected{% endif %}>{{ value }}</option>
+                {% endwith %}
+                {% endfor %}
+            </select>
+            per page
+            <input type="submit" value="apply" />
+        </form>
+    </div>
+</div>
diff --git a/musician/templates/musician/databases.html b/musician/templates/musician/databases.html
index c15d7b4..448432c 100644
--- a/musician/templates/musician/databases.html
+++ b/musician/templates/musician/databases.html
@@ -48,5 +48,5 @@
 
   {% endfor %}
 
-  {% include "musician/components/table_paginator.html" %}
+  {% include "musician/components/paginator.html" %}
 {% endblock %}