paddington-eurostar/templates/results.html

{% extends "base.html" %}
{% block title %}{% if journey_type == 'inbound' %}{{ destination }} to {{ departure_station_name }} via Eurostar{% elif journey_type == 'return' %}{{ departure_station_name }} to {{ destination }} return via Eurostar{% else %}{{ departure_station_name }} to {{ destination }} via Eurostar{% endif %}{% endblock %}
{% block og_title %}{{ self.title()|trim }}{% endblock %}
{% block og_description %}Train options from {{ departure_station_name }} to {{ destination }} on {{ travel_date_display }} via Paddington, St Pancras, and Eurostar.{% endblock %}
{% block twitter_title %}{{ self.title()|trim }}{% endblock %}
{% block twitter_description %}Train options from {{ departure_station_name }} to {{ destination }} on {{ travel_date_display }} via Paddington, St Pancras, and Eurostar.{% endblock %}
{% block content %}

<p class="back-link">
  <a href="{{ url_for('index') }}">&larr; New search</a>
</p>

<div class="card" style="margin-bottom:1.5rem">
  <h2>
    {% if journey_type == 'inbound' %}
      {{ destination }} &rarr; {{ departure_station_name }}
    {% elif journey_type == 'return' %}
      {{ departure_station_name }} &harr; {{ destination }}
    {% else %}
      {{ departure_station_name }} &rarr; {{ destination }}
    {% endif %}
  </h2>
  {% if journey_type == 'return' %}
  <div class="date-nav">
    <span class="date-nav-label">Outbound:</span>
    <a href="{{ prev_outbound_url }}" class="btn-nav">&larr; Prev</a>
    <strong>{{ travel_date_display }}</strong>
    <a href="{{ next_outbound_url }}" class="btn-nav">Next &rarr;</a>
  </div>
  <div class="date-nav">
    <span class="date-nav-label">Return:</span>
    <a href="{{ prev_return_url }}" class="btn-nav">&larr; Prev</a>
    <strong>{{ return_date_display }}</strong>
    <a href="{{ next_return_url }}" class="btn-nav">Next &rarr;</a>
  </div>
  {% else %}
  <div class="date-nav">
    <a href="{{ prev_results_url }}"
       class="btn-nav">&larr; Prev</a>
    <strong>{{ travel_date_display }}</strong>
    <a href="{{ next_results_url }}"
       class="btn-nav">Next &rarr;</a>
  </div>
  {% endif %}
  <div class="switcher-section">
    <div class="section-label">Switch destination for {{ travel_date_display }}</div>
    <div class="chip-row">
      {% for destination_slug, destination_name, destination_url in destination_links %}
        {% if destination_slug == slug %}
          <span class="chip-current">{{ destination_name }}</span>
        {% else %}
          <a
            class="chip-link"
            href="{{ destination_url }}"
          >{{ destination_name }}</a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="filter-row">
    <div>
      <label for="min_conn_select" class="filter-label">Min connection:</label>
      <select id="min_conn_select" onchange="applyConnectionFilter()" class="select-inline">
        {% for mins in valid_min_connections %}
          <option value="{{ mins }}" {% if mins == min_connection %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="max_conn_select" class="filter-label">Max connection:</label>
      <select id="max_conn_select" onchange="applyConnectionFilter()" class="select-inline">
        {% for mins in valid_max_connections %}
          <option value="{{ mins }}" {% if mins == max_connection %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="filter-row" style="margin-top:0.5rem">
    <div>
      <span class="filter-label">NR ticket:</span>
      <span id="nr-type-select" style="display:none"></span>
      <span style="display:none">Load advance prices</span>
      <div class="btn-group">
        <button type="button" class="btn-group-option {% if nr_class == 'walkon' %}active{% endif %}" onclick="setNrClass('walkon')">Walk-on Std</button>
        <button type="button" class="btn-group-option {% if nr_class == 'advance_std' %}active{% endif %}" onclick="setNrClass('advance_std')">Advance Std</button>
        <button type="button" class="btn-group-option {% if nr_class == 'advance_1st' %}active{% endif %}" onclick="setNrClass('advance_1st')">Advance 1st</button>
      </div>
      <span id="walkon-loading"><span class="spinner spinner-inline" aria-hidden="true"></span>Loading fares</span>
      <span id="advance-loading" style="display:none"><span class="spinner spinner-inline" aria-hidden="true"></span>Loading advance fares</span>
    </div>
    <div>
      <span class="filter-label">Eurostar:</span>
      <span id="es-type-select" style="display:none"></span>
      <div class="btn-group">
        <button type="button" class="btn-group-option {% if es_class == 'standard' %}active{% endif %}" onclick="setEsClass('standard')">Standard</button>
        <button type="button" class="btn-group-option {% if es_class == 'plus' %}active{% endif %}" onclick="setEsClass('plus')">Standard Premier</button>
      </div>
    </div>
  </div>
  <script>
    const RESULTS_BASE = '{{ results_base_url }}';
    const DEFAULT_MIN_CONN = {{ default_min_connection }};
    const DEFAULT_MAX_CONN = {{ default_max_connection }};
    let TRIP_FARES = {{ trip_fares_json | safe }};
    let ADVANCE_FARES = {{ advance_fares_json | safe }};
    let WALKON_API_URLS = {{ walkon_api_urls_json | safe }};
    let ADVANCE_API_URLS = {{ advance_api_urls_json | safe }};
    let ADVANCE_STREAM_URLS = {{ advance_stream_urls_json | safe }};
    const TIMETABLE_REFRESH_URL = {{ timetable_refresh_url|tojson }};
    const HAS_PROVISIONAL_TIMETABLE = {{ 'true' if provisional_timetable else 'false' }};
    let cachedAdvanceFares = ADVANCE_FARES;
    let currentNrClass = '{{ nr_class }}';
    let currentEsClass = '{{ es_class }}';
    let advanceLoadingSections = {};

    function updateAdvanceLoadingStatus() {
      var loading = Object.keys(advanceLoadingSections).some(function(sectionId) {
        return advanceLoadingSections[sectionId];
      });
      var el = document.getElementById('advance-loading');
      if (el) el.style.display = loading ? 'inline-flex' : 'none';
    }

    function buildUrl(nrCls, esCls) {
      var min = parseInt(document.getElementById('min_conn_select').value);
      var max = parseInt(document.getElementById('max_conn_select').value);
      var params = [];
      if (min !== DEFAULT_MIN_CONN) params.push('min_connection=' + min);
      if (max !== DEFAULT_MAX_CONN) params.push('max_connection=' + max);
      if (nrCls !== 'walkon') params.push('nr_class=' + nrCls);
      if (esCls !== 'standard') params.push('es_class=' + esCls);
      return params.length ? RESULTS_BASE + '?' + params.join('&') : RESULTS_BASE;
    }

    function applyConnectionFilter() {
      window.location = buildUrl(currentNrClass, currentEsClass);
    }

    function setNrClass(cls) {
      currentNrClass = cls;
      document.querySelectorAll('.btn-group-option[onclick^="setNrClass"]').forEach(function(btn) {
        btn.classList.toggle('active', btn.getAttribute('onclick') === "setNrClass('" + cls + "')");
      });
      history.replaceState(null, '', buildUrl(cls, currentEsClass));
      if (cls === 'advance_std' || cls === 'advance_1st') loadMissingAdvanceFares();
      updateDisplay();
    }

    function setEsClass(cls) {
      currentEsClass = cls;
      document.querySelectorAll('.btn-group-option[onclick^="setEsClass"]').forEach(function(btn) {
        btn.classList.toggle('active', btn.getAttribute('onclick') === "setEsClass('" + cls + "')");
      });
      history.replaceState(null, '', buildUrl(currentNrClass, cls));
      updateDisplay();
    }

    function fmtPrice(p) {
      return '\u00a3' + p.toFixed(2);
    }

    function fareHtml(fare) {
      return '<span class="text-sm font-bold">' + fmtPrice(fare.price) + '</span>'
           + (fare.ticket ? ' <span class="text-xs text-muted">' + fare.ticket + '</span>' : '')
           + (fare.seats != null ? ' <span class="text-xs text-muted">' + fare.seats + ' at this price</span>' : '');
    }

    function mergeAdvanceFares(sectionId, fares) {
      if (!ADVANCE_FARES) ADVANCE_FARES = {};
      if (!ADVANCE_FARES[sectionId]) ADVANCE_FARES[sectionId] = {};
      for (var time in fares) {
        if (!ADVANCE_FARES[sectionId][time]) {
          ADVANCE_FARES[sectionId][time] = {advance_std: null, advance_1st: null};
        }
        if (fares[time].advance_std) ADVANCE_FARES[sectionId][time].advance_std = fares[time].advance_std;
        if (fares[time].advance_1st) ADVANCE_FARES[sectionId][time].advance_1st = fares[time].advance_1st;
      }
    }

    function mergeWalkonFares(sectionId, fares) {
      for (var key in TRIP_FARES) {
        var row = TRIP_FARES[key];
        if (row.section !== sectionId || !row.advance_key || !fares[row.advance_key]) continue;
        var fare = fares[row.advance_key];
        row.walkon = {price: fare.price, ticket: fare.ticket || ''};
      }
    }

    function mergeEurostarPrices(prices) {
      for (var key in prices) {
        for (var rowKey in TRIP_FARES) {
          var row = TRIP_FARES[rowKey];
          if (rowKey !== key && row.eurostar_key !== key) continue;
          if (prices[key].es_standard) row.es_standard = prices[key].es_standard;
          if (prices[key].es_plus) row.es_plus = prices[key].es_plus;
        }
      }
    }

    function sectionNeedsAdvance(sectionId) {
      for (var key in TRIP_FARES) {
        var row = TRIP_FARES[key];
        if (row.section !== sectionId || !row.advance_key) continue;
        var sectionFares = ADVANCE_FARES && ADVANCE_FARES[sectionId];
        var advanceFares = sectionFares && sectionFares[row.advance_key];
        if (!advanceFares) return true;
        if (currentNrClass === 'advance_std' && !advanceFares.advance_std) return true;
        if (currentNrClass === 'advance_1st' && !advanceFares.advance_1st) return true;
      }
      return false;
    }

    function loadAdvanceFaresForSection(sectionId) {
      if (advanceLoadingSections[sectionId] || !ADVANCE_API_URLS[sectionId]) return;
      advanceLoadingSections[sectionId] = true;
      updateAdvanceLoadingStatus();
      if (!ADVANCE_FARES) ADVANCE_FARES = {};
      if (!ADVANCE_FARES[sectionId]) ADVANCE_FARES[sectionId] = {};

      fetch(ADVANCE_API_URLS[sectionId])
        .then(function(response) {
          if (!response.ok) throw new Error('advance fare request failed');
          return response.json();
        })
        .then(function(fares) {
          mergeAdvanceFares(sectionId, fares);
        })
        .catch(function() {})
        .finally(function() {
          advanceLoadingSections[sectionId] = false;
          updateAdvanceLoadingStatus();
          updateDisplay();
        });
    }

    function loadAdvanceFaresForSectionStreaming(sectionId) {
      if (advanceLoadingSections[sectionId] || !ADVANCE_STREAM_URLS[sectionId]) return;
      advanceLoadingSections[sectionId] = true;
      updateAdvanceLoadingStatus();
      if (!ADVANCE_FARES) ADVANCE_FARES = {};
      if (!ADVANCE_FARES[sectionId]) ADVANCE_FARES[sectionId] = {};

      var hadMessage = false;
      var source = new EventSource(ADVANCE_STREAM_URLS[sectionId]);
      source.onmessage = function(event) {
        hadMessage = true;
        var msg = JSON.parse(event.data);
        if (msg.type === 'fares') {
          mergeAdvanceFares(sectionId, msg.fares);
          updateDisplay();
        }
        if (msg.type === 'done' || msg.type === 'error') {
          advanceLoadingSections[sectionId] = false;
          source.close();
          updateAdvanceLoadingStatus();
          updateDisplay();
        }
      };
      source.onerror = function() {
        advanceLoadingSections[sectionId] = false;
        source.close();
        updateAdvanceLoadingStatus();
        if (!hadMessage && ADVANCE_API_URLS[sectionId]) {
          loadAdvanceFaresForSection(sectionId);
        } else {
          updateDisplay();
        }
      };
    }

    function loadMissingAdvanceFares() {
      for (var sectionId in ADVANCE_STREAM_URLS) {
        if (sectionNeedsAdvance(sectionId)) loadAdvanceFaresForSectionStreaming(sectionId);
      }
    }

    function currentNrFare(row) {
      if (currentNrClass === 'walkon') return row.walkon;
      var sectionFares = ADVANCE_FARES && ADVANCE_FARES[row.section];
      var advFares = sectionFares && row.advance_key ? sectionFares[row.advance_key] : null;
      if (!advFares) return row.walkon;
      return (currentNrClass === 'advance_std' ? advFares.advance_std : advFares.advance_1st) || row.walkon;
    }

    function updateDisplay() {
      var totals = {};
      document.querySelectorAll('tr[data-row-key]').forEach(function(tr) {
        var key = tr.getAttribute('data-row-key');
        var row = TRIP_FARES[key];
        if (!row) return;
        var nrFare = currentNrFare(row);
        var esFare = currentEsClass === 'standard' ? row.es_standard : row.es_plus;
        if (nrFare && esFare) totals[key] = nrFare.price + esFare.price + (row.circle_fare || 0);
      });
      var totalValues = Object.values(totals);
      var minTotal = totalValues.length > 1 ? Math.min.apply(null, totalValues) : null;
      var maxTotal = totalValues.length > 1 ? Math.max.apply(null, totalValues) : null;

      document.querySelectorAll('tr[data-row-key]').forEach(function(tr) {
        var key = tr.getAttribute('data-row-key');
        var row = TRIP_FARES[key];
        if (!row) return;

        var nrFare = currentNrFare(row);
        var walkonEl = tr.querySelector('.nr-walkon');
        var advStdEl = tr.querySelector('.nr-advance-std');
        var adv1stEl = tr.querySelector('.nr-advance-1st');
        if (walkonEl) {
          walkonEl.innerHTML = row.walkon ? fareHtml(row.walkon) : '<span class="text-sm text-muted">\u2013</span>';
          walkonEl.classList.toggle('fare-inactive', currentNrClass !== 'walkon');
        }
        if (advStdEl || adv1stEl) {
          var sectionFares = ADVANCE_FARES && ADVANCE_FARES[row.section];
          var advFares = sectionFares && row.advance_key ? sectionFares[row.advance_key] : null;
          if (advStdEl) {
            advStdEl.innerHTML = advFares && advFares.advance_std ? fareHtml(advFares.advance_std) : '';
            advStdEl.classList.toggle('fare-inactive', currentNrClass !== 'advance_std');
          }
          if (adv1stEl) {
            adv1stEl.innerHTML = advFares && advFares.advance_1st ? fareHtml(advFares.advance_1st) : '';
            adv1stEl.classList.toggle('fare-inactive', currentNrClass !== 'advance_1st');
          }
        }

        var esStdEl = tr.querySelector('.es-standard');
        var esPlusEl = tr.querySelector('.es-plus');
        if (esStdEl) {
          esStdEl.innerHTML = row.es_standard ? fareHtml(row.es_standard) : '<span class="text-sm text-muted">\u2013</span>';
          esStdEl.classList.toggle('fare-inactive', currentEsClass !== 'standard');
        }
        if (esPlusEl) {
          esPlusEl.innerHTML = row.es_plus ? fareHtml(row.es_plus) : '<span class="text-sm text-muted">\u2013</span>';
          esPlusEl.classList.toggle('fare-inactive', currentEsClass !== 'plus');
        }

        var totalSpan = tr.querySelector('.total-price');
        if (totalSpan) {
          if (key in totals) {
            var total = totals[key];
            var html = '<span class="text-sm text-green" style="font-weight:700">' + fmtPrice(total);
            if (minTotal !== null && maxTotal !== null) {
              if (total <= minTotal + 10) html += ' <span title="Cheapest journey">🪙</span>';
              else if (total >= maxTotal - 10) html += ' <span title="Most expensive journey">💸</span>';
            }
            html += '</span>';
            totalSpan.innerHTML = html;
          } else {
            var missing = !nrFare ? 'No NR fare' : 'No Eurostar fare';
            totalSpan.innerHTML = '<span class="text-xs text-muted">' + missing + '</span>';
          }
        }
      });
    }

    function loadWalkonFares() {
      var urls = WALKON_API_URLS;
      var pending = Object.keys(urls).length;
      if (!pending) return;
      function done() {
        if (--pending === 0) {
          var el = document.getElementById('walkon-loading');
          if (el) el.style.display = 'none';
        }
      }
      for (var sectionId in urls) {
        (function(id, url) {
          fetch(url).then(function(r) { return r.json(); }).then(function(fares) {
            mergeWalkonFares(id, fares);
            updateDisplay();
            done();
          }).catch(done);
        })(sectionId, urls[sectionId]);
      }
    }

    function initialiseResultsPage() {
      if (currentNrClass === 'advance_std' || currentNrClass === 'advance_1st') loadMissingAdvanceFares();
      updateDisplay();
      loadWalkonFares();
      startTimetableRefresh();
    }

    function runInsertedScripts(root) {
      root.querySelectorAll('script').forEach(function(oldScript) {
        var script = document.createElement('script');
        for (var i = 0; i < oldScript.attributes.length; i++) {
          var attr = oldScript.attributes[i];
          script.setAttribute(attr.name, attr.value);
        }
        script.text = oldScript.text;
        oldScript.parentNode.replaceChild(script, oldScript);
      });
    }

    function fullResultsUrl() {
      var url = new URL(window.location.href);
      url.searchParams.set('render', 'full');
      return url.toString();
    }

    function refreshFullResults() {
      fetch(fullResultsUrl(), {headers: {'X-Requested-With': 'fetch'}})
        .then(function(response) {
          if (!response.ok) throw new Error('Could not refresh results');
          return response.text();
        })
        .then(function(html) {
          var doc = new DOMParser().parseFromString(html, 'text/html');
          var nextMain = doc.querySelector('main');
          var currentMain = document.querySelector('main');
          if (!nextMain || !currentMain) throw new Error('Results page was incomplete');
          document.title = doc.title;
          currentMain.innerHTML = nextMain.innerHTML;
          runInsertedScripts(currentMain);
        })
        .catch(function() {});
    }

    function startTimetableRefresh() {
      if (!HAS_PROVISIONAL_TIMETABLE || !TIMETABLE_REFRESH_URL || !window.EventSource) return;
      var source = new EventSource(TIMETABLE_REFRESH_URL);
      source.onmessage = function(event) {
        var msg = JSON.parse(event.data);
        if (msg.type === 'reload') {
          source.close();
          refreshFullResults();
        } else if (msg.type === 'eurostar_prices') {
          mergeEurostarPrices(msg.prices);
          updateDisplay();
        } else if (msg.type === 'walkon_fares') {
          mergeWalkonFares(msg.section, msg.fares);
          updateDisplay();
        } else if (msg.type === 'done' || msg.type === 'error') {
          source.close();
        }
      };
      source.onerror = function() {
        source.close();
      };
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initialiseResultsPage);
    } else {
      initialiseResultsPage();
    }
  </script>
  <p class="card-meta">
    {% if journey_type == 'return' %}
      {% for section in sections %}
        {% if section.direction == 'outbound' %}Outbound{% else %}Return{% endif %}:
        {{ section.gwr_count }} National Rail service{{ 's' if section.gwr_count != 1 }},
        {{ section.eurostar_count }} Eurostar service{{ 's' if section.eurostar_count != 1 }}
        {% if not loop.last %}&nbsp;&middot;&nbsp;{% endif %}
      {% endfor %}
    {% else %}
      {{ gwr_count }} National Rail service{{ 's' if gwr_count != 1 }}
      &nbsp;&middot;&nbsp;
      {{ eurostar_count }} Eurostar service{{ 's' if eurostar_count != 1 }}
    {% endif %}
    {% if from_cache %}
      &nbsp;&middot;&nbsp; <span class="text-muted text-sm">(cached)</span>
    {% endif %}
    {% if provisional_timetable %}
      &nbsp;&middot;&nbsp; <span class="text-muted text-sm">checking exact timetable</span>
    {% endif %}
  </p>
  {% if error %}
    <div class="alert alert-error">
      <strong>Warning:</strong> {{ error }}
    </div>
  {% endif %}
  {% if no_prices_note %}
    <div class="alert alert-warning">
      {{ no_prices_note }}
    </div>
  {% endif %}
</div>

{% if sections %}
  {% for section in sections %}
    <div class="card" style="margin-bottom:1.5rem">
      <h2>
        {% if section.direction == 'inbound' %}
          Return: {{ destination }} &rarr; {{ departure_station_name }}
        {% else %}
          Outbound: {{ departure_station_name }} &rarr; {{ destination }}
        {% endif %}
      </h2>
      <p class="card-meta">{{ section.date_display }}</p>
      {% if section.rows %}
      <table class="results-table">
        <thead>
          <tr>
            {% if section.direction == 'inbound' %}
              <th>Eurostar<br><span class="text-xs font-normal text-muted">{{ destination }} &rarr; St Pancras</span></th>
              <th class="col-transfer">Transfer<br><span class="text-xs font-normal text-muted">St Pancras &rarr; Paddington</span></th>
              <th>National Rail<br><span class="text-xs font-normal text-muted">Paddington &rarr; {{ departure_station_name }}</span></th>
            {% else %}
              <th>National Rail<br><span class="text-xs font-normal text-muted">{{ departure_station_name }} &rarr; Paddington</span></th>
              <th class="col-transfer">Transfer<br><span class="text-xs font-normal text-muted">Paddington &rarr; St Pancras</span></th>
              <th>Eurostar<br><span class="text-xs font-normal text-muted">St Pancras &rarr; {{ destination }}</span></th>
            {% endif %}
            <th class="nowrap">Total</th>
          </tr>
        </thead>
        <tbody>
          {% set trip_rows = section.rows | selectattr('row_type', 'equalto', 'trip') | list %}
          {% if trip_rows %}
            {% set best_mins = trip_rows | map(attribute='total_minutes') | min %}
            {% set worst_mins = trip_rows | map(attribute='total_minutes') | max %}
          {% endif %}
          {% for row in section.rows %}
          {% if row.row_type == 'trip' and row.total_minutes <= best_mins + 5 and trip_rows | length > 1 %}
            {% set row_class = 'row-fast' %}
          {% elif row.row_type == 'trip' and row.total_minutes >= worst_mins - 5 and trip_rows | length > 1 %}
            {% set row_class = 'row-slow' %}
          {% elif row.row_type == 'unreachable' %}
            {% set row_class = 'row-unreachable' %}
          {% elif loop.index is odd %}
            {% set row_class = 'row-alt' %}
          {% else %}
            {% set row_class = '' %}
          {% endif %}
          <tr class="{{ row_class }}" data-row-key="{{ row.row_key }}"
              {% if row.eurostar_price is not none %}data-es-std="{{ row.eurostar_price }}"{% endif %}>
            {% if row.row_type == 'trip' %}
              {% if section.direction == 'inbound' %}
                <td>
                  <span class="font-bold nowrap">{{ row.depart_destination }} &rarr; {{ row.arrive_st_pancras }} <span class="font-normal text-muted" style="font-size:0.85em">(UK)</span></span>
                  <br><span class="text-xs text-muted">check in by {{ row.check_in_by }}</span>
                  {% if row.eurostar_duration or row.train_number %}
                    <br><span class="text-xs text-muted">
                      {%- if row.eurostar_duration %}<span class="nowrap">({{ row.eurostar_duration }})</span>{% endif %}
                      {%- if row.eurostar_duration and row.train_number %} &middot; {% endif %}
                      {%- if row.train_number %}{{ row.train_number }}{% endif %}
                    </span>
                  {% endif %}
                  <span class="fare-line es-standard">{% if row.eurostar_price is not none %}<span class="text-sm font-bold">£{{ "%.2f"|format(row.eurostar_price) }}</span>{% endif %}</span>
                  <span class="fare-line es-plus">{% if row.eurostar_plus_price is not none %}<span class="text-sm font-bold">£{{ "%.2f"|format(row.eurostar_plus_price) }}</span>{% endif %}</span>
                </td>
                <td class="col-transfer" style="color:#4a5568">
                  <span class="nowrap">{{ row.connection_duration }}{% if row.connection_minutes < 45 %} <span title="Tight connection">⚠️</span>{% endif %}</span>
                  {% if row.circle_services %}
                    {% if row.circle_services | length > 1 %}
                      {% set c_early = row.circle_services[0] %}
                      {% set c = row.circle_services[1] %}
                      <br><span class="text-xs text-muted nowrap">Circle {{ c_early.depart }} &rarr; PAD {{ c_early.arrive_pad }} · £{{ "%.2f"|format(c_early.fare) }}</span>
                      <br><span class="text-xs text-muted nowrap" style="opacity:0.7">next {{ c.depart }} &rarr; PAD {{ c.arrive_pad }}</span>
                    {% else %}
                      {% set c = row.circle_services[0] %}
                      <br><span class="text-xs text-muted nowrap">Circle {{ c.depart }} &rarr; PAD {{ c.arrive_pad }} · £{{ "%.2f"|format(c.fare) }}</span>
                    {% endif %}
                  {% endif %}
                </td>
                <td>
                  <span class="font-bold nowrap">{{ row.depart_paddington }} &rarr; {{ row.arrive_uk_station }}</span>
                  <span class="text-sm text-muted nowrap">({{ row.gwr_duration }})</span>
                  {% if row.headcode or row.arrive_platform %}
                    <br><span class="text-xs text-muted">{{ row.headcode }}{% if row.headcode and row.arrive_platform %} &middot; {% endif %}{% if row.arrive_platform %}Plat {{ row.arrive_platform }}{% endif %}</span>
                  {% endif %}
                  <span class="fare-line nr-walkon">{% if row.ticket_price is not none %}<span class="text-sm font-bold">£{{ "%.2f"|format(row.ticket_price) }}</span>{% endif %}</span>
                  <span class="fare-line nr-advance-std"></span>
                  <span class="fare-line nr-advance-1st"></span>
                </td>
              {% else %}
                <td>
                  <span class="font-bold nowrap">{{ row.depart_bristol }} &rarr; {{ row.arrive_paddington }}</span>
                  <span class="text-sm text-muted nowrap">({{ row.gwr_duration }})</span>
                  {% if row.headcode or row.arrive_platform %}
                    <br><span class="text-xs text-muted">{{ row.headcode }}{% if row.headcode and row.arrive_platform %} &middot; {% endif %}{% if row.arrive_platform %}Plat {{ row.arrive_platform }}{% endif %}</span>
                  {% endif %}
                  <span class="fare-line nr-walkon">{% if row.ticket_price is not none %}<span class="text-sm font-bold">£{{ "%.2f"|format(row.ticket_price) }}</span>{% endif %}</span>
                  <span class="fare-line nr-advance-std"></span>
                  <span class="fare-line nr-advance-1st"></span>
                </td>
                <td class="col-transfer" style="color:#4a5568">
                  <span class="nowrap">{{ row.connection_duration }}{% if row.connection_minutes < 80 %} <span title="Tight connection">⚠️</span>{% endif %}</span>
                  {% if row.circle_services %}
                    {% set c = row.circle_services[0] %}
                    <br><span class="text-xs text-muted nowrap">Circle {{ c.depart }} &rarr; KX {{ c.arrive_kx }} · £{{ "%.2f"|format(c.fare) }}</span>
                    {% if row.circle_services | length > 1 %}
                      {% set c2 = row.circle_services[1] %}
                      <br><span class="text-xs text-muted nowrap" style="opacity:0.7">next {{ c2.depart }} &rarr; KX {{ c2.arrive_kx }} · £{{ "%.2f"|format(c2.fare) }}</span>
                    {% endif %}
                  {% endif %}
                </td>
                <td>
                  <span class="font-bold nowrap">{{ row.depart_st_pancras }} &rarr; {{ row.arrive_destination }} <span class="font-normal text-muted" style="font-size:0.85em">(CET)</span></span>
                  {% if row.eurostar_duration or row.train_number %}
                    <br><span class="text-xs text-muted">
                      {%- if row.eurostar_duration %}<span class="nowrap">({{ row.eurostar_duration }})</span>{% endif %}
                      {%- if row.eurostar_duration and row.train_number %} &middot; {% endif %}
                      {%- if row.train_number %}{{ row.train_number }}{% endif %}
                    </span>
                  {% endif %}
                  <span class="fare-line es-standard">{% if row.eurostar_price is not none %}<span class="text-sm font-bold">£{{ "%.2f"|format(row.eurostar_price) }}</span>{% endif %}</span>
                  <span class="fare-line es-plus">{% if row.eurostar_plus_price is not none %}<span class="text-sm font-bold">£{{ "%.2f"|format(row.eurostar_plus_price) }}</span>{% endif %}</span>
                </td>
              {% endif %}
              <td class="font-bold nowrap">
                {% if row.total_minutes <= best_mins + 5 and trip_rows | length > 1 %}
                  <span class="text-green" title="Fastest journey">{{ row.total_duration }} ⚡</span>
                {% elif row.total_minutes >= worst_mins - 5 and trip_rows | length > 1 %}
                  <span class="text-red" title="Slowest journey">{{ row.total_duration }} 🐢</span>
                {% else %}
                  <span class="text-blue">{{ row.total_duration }}</span>
                {% endif %}
                <br><span class="total-price"></span>
              </td>
            {% else %}
              <td>
                <span class="text-dimmed text-sm">Too early</span>
              </td>
              <td class="col-transfer text-dimmed">&mdash;</td>
              <td>
                {% if section.direction == 'inbound' %}
                  <span class="font-bold nowrap text-dimmed">{{ row.depart_destination }} &rarr; {{ row.arrive_st_pancras }}</span>
                  {% if row.train_number %}<br><span class="text-xs text-dimmed">{{ row.train_number }}</span>{% endif %}
                {% else %}
                  <span class="font-bold nowrap text-dimmed">{{ row.depart_st_pancras }} &rarr; {{ row.arrive_destination }}</span>
                  {% if row.train_number %}<br><span class="text-xs text-dimmed">{{ row.train_number }}</span>{% endif %}
                {% endif %}
              </td>
              <td class="text-dimmed nowrap">No connection</td>
            {% endif %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
        <div class="empty-state">
          <p>No valid journeys found.</p>
          <p>
            {% if section.gwr_count == 0 and section.eurostar_count == 0 %}
              Could not retrieve train data. Check your network connection or try again.
            {% elif section.gwr_count == 0 %}
              No National Rail trains found for this date.
            {% elif section.eurostar_count == 0 %}
              No Eurostar services found for {{ destination }} on this date.
            {% else %}
              No National Rail + Eurostar combination has a {{ section.min_connection }}-{{ section.max_connection }} minute connection.
            {% endif %}
          </p>
        </div>
      {% endif %}
    </div>
  {% endfor %}

  <p class="footnote">
    Connection windows:
    {% for section in sections %}
      {% if section.direction == 'inbound' %}return{% else %}outbound{% endif %}
      {{ section.min_connection }}&ndash;{{ section.max_connection }}&nbsp;min{% if not loop.last %}; {% endif %}
    {% endfor %}.
    National Rail prices from <a href="https://www.gwr.com/" target="_blank" rel="noopener">gwr.com</a>.
    Eurostar prices are for 1 adult in GBP; return searches use Eurostar return-search prices.
    Always check <a href="{{ eurostar_url }}" target="_blank" rel="noopener">eurostar.com</a> to book.
    &nbsp;&middot;&nbsp;
    <a href="{{ rtt_station_url }}" target="_blank" rel="noopener">{{ departure_station_name }} on RTT</a>
    &nbsp;&middot;&nbsp;
    <a href="{{ rtt_url }}" target="_blank" rel="noopener">Paddington on RTT</a>
  </p>
{% endif %}

{% endblock %}