<!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">

<!--
<style>
body {
  background: black;
  color: white;
}

  .table  { color: white; }

a:link {
  color: rgb(127, 127, 255);
}

</style>
-->


</head>

{% from "individual_route.html" import route_table with context %}

<body>
  <div class="m-3">

    <p>{{ days_until_start }} days / {{ (days_until_start / 7) | int }} weeks / {{ "{:.1f}".format(days_until_start / 30.5) }} months until start of travel.</p>

    <p>
    Passengers:
      {% for o in pax_options %}
          {% if o.pax == pax %}
            <strong>{{ o.label }}</strong>
          {% else %}
            <a href="?adults={{ o.pax.adults}}&small_dogs={{ o.pax.small_dogs }}">{{ o.label }}</a>
          {% endif %}
          {% if not loop.last %}|{% endif %}
      {% endfor %}
    </p>

    {% if rear_mounted_bike_carrier %}
      <p>Bike carrier: <strong>yes</strong> | <a href="{{ url_for(request.endpoint) }}">no</a></p>
    {% else %}
      <p>Bike carrier:
      <a href="{{ url_for(request.endpoint, rear_mounted_bike_carrier='true') }}">yes</a>
      |
      <strong>no</strong>
      </p>
    {% endif %}

    {% if extra_routes %}
    <ul>
      {% for dep, arr in extra_routes %}
      <li><a href="{{ url_for("show_route", departure_port=ports[dep], arrival_port=ports[arr], from_date=from_date, to_date=to_date) }}">{{ dep }} - {{ arr }}</a></li>
      {% endfor %}
    </ul>
  {% endif %}

    {% for dep, arr, days in data %}
    <h4>{{ dep.title() }} to {{ arr.title() }}</h4>
      {% if days %}
        {{ route_table(dep, arr, days) }}
      {% else %}
        <p>not available</p>
      {% endif %}
    {% endfor %}

  <!--
    {{ data | pprint | safe }}
  -->
  </div>
</body>
</html>