<!DOCTYPE html>
<html>
<head>
<style>
.customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.customers td, .customers th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.customers tr:nth-child(even){background-color: #f2f2f2;}
.customers tr:hover {background-color: #ddd;}
.customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #a60c15;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div align="center" style="margin-top: 25px;">
<img src="https://ercare24.com/wp-content/uploads/2016/07/signature-care-resized-e1462918690585.png" alt="Avatar" class="image" width=50% >
<h2 style="text-align:center;">Last Month Review Report</h2>
</div>
<div align="center">
<h4>Total Review Ratings</h4>
<table class="customers">
<tr>
<th>Star ---></th>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
<tr>
<td>Last Month</td>
{% for r in this_month %}
<td>{{ r }}</td>
{% endfor %}
</tr>
</table>
</div>
<div align="center">
<h4>Staffs Report</h4>
<table class="customers">
<tr>
<th>Name</th>
<th>Department</th>
<th>Total Mentioned</th>
<th>Total Unit</th>
</tr>
<tr>
{% for staff in staffs %}
<tr>
<td>{{ staff.name }}</td>
<td>{{ staff.department }}</td>
<td>{{ staff.name_mentioned }}</td>
<td>{{ staff.total_units }}</td>
</tr>
{% endfor %}
</tr>
</table>
</div>
</body>
</html>