<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ferries to France</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="m-3">
<h1>{{ departure_port }} to {{ arrival_port }}</h1>
<p>{{ departure_date }} {{ ticket_tier }}</p>
<table class="table">
<tr>
<th>code</th>
<th>description</th>
<th>max adults</th>
<th>quantity available</th>
<th>price</th>
</tr>
{% for a in accommodations if a.quantityAvailable > 0 %}
<tr>
<td>{{ a.code }}</td>
<td>{{ a.description }}</td>
<td>{{ a.maxAdults }}</td>
<td>{{ a.quantityAvailable }}</td>
<td>£{{ a.unitCost.amount }}</td>
</tr>
{% endfor %}
</table>
</div>
</body>
</html>