{% extends "base.html" %}
{% block content %}
<div class="card">
  <h2>Plan your journey</h2>
  <form method="get" action="{{ url_for('search') }}">
    <div class="form-group-lg">
      <label for="station_crs" class="field-label">Departure point</label>
      <select id="station_crs" name="station_crs" class="form-control">
        {% for name, crs in stations %}
          <option value="{{ crs }}" {% if crs == 'BRI' %}selected{% endif %}>{{ name }} ({{ crs }})</option>
        {% endfor %}
      </select>
    </div>

    <div class="form-group">
      <span class="field-label">Eurostar destination</span>
      <div class="destination-grid" role="radiogroup" aria-label="Eurostar destination">
        {% for slug, name in destinations.items() %}
          {% set city = name.replace(' Gare du Nord', '').replace(' Centraal', '').replace(' Midi', '').replace(' Europe', '') %}
          <div class="destination-option">
            <input
              type="radio"
              id="destination-{{ slug }}"
              name="destination"
              value="{{ slug }}"
              {% if loop.first %}checked{% endif %}
              required>
            <label for="destination-{{ slug }}">
              <strong>{{ city }}</strong>
              <span>{{ name }}</span>
            </label>
          </div>
        {% endfor %}
      </div>
    </div>

    <div class="form-group-lg">
      <label for="travel_date" class="field-label">
        Travel date
      </label>
      <input type="date" id="travel_date" name="travel_date" required
        min="{{ today }}" value="{{ today }}"
        class="form-control">
    </div>

    <div class="form-group">
      <label for="min_connection" class="field-label">
        Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
      </label>
      <select id="min_connection" name="min_connection" class="form-control">
        {% for mins in valid_min_connections %}
          <option value="{{ mins }}" {% if mins == 50 %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>

    <div class="form-group-lg">
      <label for="max_connection" class="field-label">
        Maximum connection time (Paddington &rarr; St&nbsp;Pancras)
      </label>
      <select id="max_connection" name="max_connection" class="form-control">
        {% for mins in valid_max_connections %}
          <option value="{{ mins }}" {% if mins == 110 %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>

    <button type="submit" class="btn-primary">
      Search journeys
    </button>
  </form>
</div>
{% endblock %}