add fixes for tutorial part 2

app.py

@@ -1,5 +1,6 @@
 import csv
-from flask import Flask, render_template, abort
+import math
+from flask import Flask, render_template, abort, request
 
 app = Flask(__name__)
 
@@ -27,7 +28,21 @@ def about():
 
 @app.route("/staff")
 def staff():
-    return render_template("staff.html", employees=employees().values())
+    page = int(request.args.get("page", 1))
+    per_page = 10
+    total_items = len(employees())
+    max_page = math.ceil(total_items / per_page)
+    print(max_page)
+    if page < 1 or page > max_page:
+        abort(404)
+    page_employees = list(employees().values())[(page - 1) * per_page : page * per_page]
+    return render_template(
+        "staff.html",
+        employees=page_employees,
+        page=page,
+        prev_page=page - 1,
+        next_page=page + 1 if page < max_page else None,
+    )
 
 
 @app.route("/staff/<id_>")

data/employees.csv

@@ -18,7 +18,7 @@ id,first,last,position,status,children,hired
 27,John,Joseph,Government Relations,Married,2,10/31/1938
 28,John,Kim Chi,Craft Services,Married,2,7/24/1990
 29,John,Lee,Accounting,Single,0,12/14/1988
-30,John,Littlejohn,Staff Parlementarian,Divorced,0,10/31/1938
+30,John,Littlejohn,Staff Parliamentarian,Divorced,0,10/31/1938
 31,John,Many Jars,Storage Acquisition Lead,Married,3,1/8/1960
 666,John,Milton,Chief Counsel,Single,2,6/6/1966
 32,John,Mud Head,Apian Research Lead,Married,7,1/2/1956

templates/staff.html

@@ -4,7 +4,7 @@
   <div class="card fluid">
     <h1 class="section">Yoyodyne Propulsion Systems <small>Staff Roster</small></h1>
     <div class="section">
-      <table id="employees">
+      <table id="employees" style="max-height: 100%;">
       <thead>
         <tr>
           <th>First Name</th>
@@ -24,6 +24,17 @@
       {% endfor %}
       </tbody>
       </table>
+      <div style="display: grid; grid-template-columns: auto auto;">
+      {% if prev_page %}
+        <a class="button" href="?page={{ prev_page }}" style="justify-self: start;">&laquo; Previous</a>
+      {% else %}
+        <!-- for grid spacing -->
+        <span>&nbsp;</span>
+      {% endif %}
+      {% if next_page %}
+        <a class="button" style="justify-self: end;" href="?page={{ next_page }}">Next &raquo;</a>
+      {% endif %}
+      </div>
     </div>
   </div>
 {% endblock %}