2 files changed, 41 insertions, 4 deletions
diff --git a/internal/ui/pagination.go b/internal/ui/pagination.go
index 5a31192a..e7c63a16 100644
--- a/internal/ui/pagination.go
+++ b/internal/ui/pagination.go
@@ -9,17 +9,30 @@ type pagination struct {
 	Offset       int
 	ItemsPerPage int
 	ShowNext     bool
+	ShowLast     bool
+	ShowFirst    bool
 	ShowPrev     bool
 	NextOffset   int
+	LastOffset   int
 	PrevOffset   int
+	FirstOffset  int
 	SearchQuery  string
 }
 
 func getPagination(route string, total, offset, nbItemsPerPage int) pagination {
 	nextOffset := 0
 	prevOffset := 0
+
+	firstOffset := 0
+	lastOffset := (total / nbItemsPerPage) * nbItemsPerPage
+	if lastOffset == total {
+		lastOffset -= nbItemsPerPage
+	}
+
 	showNext := (total - offset) > nbItemsPerPage
 	showPrev := offset > 0
+	showLast := showNext
+	showFirst := showPrev
 
 	if showNext {
 		nextOffset = offset + nbItemsPerPage
@@ -35,8 +48,12 @@ func getPagination(route string, total, offset, nbItemsPerPage int) pagination {
 		Offset:       offset,
 		ItemsPerPage: nbItemsPerPage,
 		ShowNext:     showNext,
+		ShowLast:     showLast,
 		NextOffset:   nextOffset,
+		LastOffset:   lastOffset,
 		ShowPrev:     showPrev,
+		ShowFirst:    showFirst,
 		PrevOffset:   prevOffset,
+		FirstOffset:  firstOffset,
 	}
 }
diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index a27aadae..66a6b0f1 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -710,6 +710,7 @@ template {
     font-size: 1.1em;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 }
 
 .pagination-top {
@@ -732,21 +733,40 @@ template {
 }
 
 .pagination > div {
-    flex: 1;
+    display: flex;
+}
+
+.pagination > div.pagination-backward > div {
+    padding-right: 15px;
+}
+
+.pagination > div.pagination-forward > div {
+    padding-left: 15px;
 }
 
 .pagination-next {
     text-align: right;
 }
 
-.pagination-prev:before {
-    content: "« ";
+.pagination-next:after {
+    content: " ›";
 }
 
-.pagination-next:after {
+.pagination-last {
+    text-align: right;
+}
+
+.pagination-last:after {
     content: " »";
 }
 
+.pagination-prev:before {
+    content: "‹ ";
+}
+.pagination-first:before {
+    content: "« ";
+}
+
 .pagination a {
     color: var(--pagination-link-color);
 }