{% extends "base.html" %}
{% block content %}
<div class="card">
  <h2 style="margin-top:0">Plan your journey</h2>
  <form method="get" action="{{ url_for('search') }}">
    <div style="margin-bottom:1.2rem">
      <label for="destination" style="display:block;font-weight:600;margin-bottom:0.4rem">
        Eurostar destination
      </label>
      <select id="destination" name="destination" required
        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
        <option value="" disabled selected>Select destination&hellip;</option>
        {% for slug, name in destinations.items() %}
          <option value="{{ slug }}">{{ name }}</option>
        {% endfor %}
      </select>
    </div>

    <div style="margin-bottom:1.5rem">
      <label for="travel_date" style="display:block;font-weight:600;margin-bottom:0.4rem">
        Travel date
      </label>
      <input type="date" id="travel_date" name="travel_date" required
        min="{{ today }}" value="{{ today }}"
        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
    </div>

    <div style="margin-bottom:1.2rem">
      <label for="min_connection" style="display:block;font-weight:600;margin-bottom:0.4rem">
        Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
      </label>
      <select id="min_connection" name="min_connection"
        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
        {% for mins in [50, 60, 70, 80, 90, 100, 110, 120] %}
          <option value="{{ mins }}" {% if mins == 50 %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>

    <div style="margin-bottom:1.5rem">
      <label for="max_connection" style="display:block;font-weight:600;margin-bottom:0.4rem">
        Maximum connection time (Paddington &rarr; St&nbsp;Pancras)
      </label>
      <select id="max_connection" name="max_connection"
        style="width:100%;padding:0.6rem 0.8rem;font-size:1rem;border:1px solid #cbd5e0;border-radius:4px">
        {% for mins in [60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180] %}
          <option value="{{ mins }}" {% if mins == 110 %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>

    <button type="submit"
      style="background:#00539f;color:#fff;border:none;padding:0.75rem 2rem;
             font-size:1rem;font-weight:600;border-radius:4px;cursor:pointer">
      Search journeys
    </button>
  </form>
</div>
{% endblock %}