{% extends "base.html" %}
{% import "_macros.html" as m %}
{% set masthead_bg = "var(--role-collection)" %}

{% block title %}Station index — {{ cruise }}{% endblock %}
{% block masthead_type %}Station index{% endblock %}

{% block head_extra %}
<style>
/* Stations index — interactive, scrollable cast list. Base table/th/td colours come
   from the canonical stylesheet; only the scroll + sticky + hover specials live here. */
table { white-space: nowrap; overflow-x: auto; display: block; }
th { position: sticky; top: 0; z-index: 1; }
td { vertical-align: middle; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--seafoam); }
  .cast-link { color: var(--ocean); font-weight: 600; text-decoration: none; }
  .cast-link:hover { text-decoration: underline; }
  .depth-pill {
    display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: var(--fs-nav); font-weight: 600; white-space: nowrap;
  }
  .pill-btn {
    display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; margin: 0.1rem 0.05rem;
  }
  .pill-profile { background: var(--ocean); color: #fff; }
  .pill-section { background: var(--ok); color: #fff; }
  .pill-btn:hover { opacity: 0.85; }
  .ladcp-yes { display:inline-block; padding:0.18rem 0.5rem; border-radius:999px; font-size:var(--fs-xs); font-weight:600; background:var(--ok); color:#fff; }
  .ladcp-no  { display:inline-block; padding:0.18rem 0.5rem; border-radius:999px; font-size:var(--fs-xs); font-weight:600; background:var(--error); color:#fff; }
  .clock-configs { display:flex; flex-wrap:wrap; gap:1rem; margin:0.5rem 0; }
  .clock-configs > div { flex:1 1 22rem; }
  .clock-configs pre { background:var(--seafoam); padding:0.5rem 0.7rem; border-radius:4px; overflow-x:auto; white-space:pre; }
</style>
{% endblock %}

{% block masthead_meta %}
  <dl class="meta-grid">
    <div><dt>Cruise</dt><dd>{{ cruise }}</dd></div>
    {% if ship %}<div><dt>Ship</dt><dd>{{ ship }}</dd></div>{% endif %}
    {% if date_start %}<div><dt>Departure</dt><dd>{{ date_start }}</dd></div>{% endif %}
    {% if date_end %}<div><dt>Arrival</dt><dd>{{ date_end }}</dd></div>{% endif %}
    {% if duration_days %}<div><dt>Duration</dt><dd>{{ duration_days }} d</dd></div>{% endif %}
    <div><dt>CTD casts</dt><dd>{{ stations|length }}</dd></div>
    {% if max_depth_str %}<div><dt>Max depth</dt><dd>{{ max_depth_str }}</dd></div>{% endif %}
  </dl>
{% endblock %}

{% block content %}
{% if cruise_map_b64 %}
<h2 id="s-map">{{ m.heading_text(1, "Map") }}</h2>
<div class="fig-row center">
  <figure class="slot-half">
    <img src="data:image/png;base64,{{ cruise_map_b64 }}" alt="All cast positions">
    {{- m.dbg(cruise_map_b64, "slot-half") }}
  </figure>
</div>
{% endif %}

<h2 id="s-table">{{ m.heading_text(2, "Casts") }}</h2>
{% if no_station_pages %}
<p class="warn">No per-cast files were found, so per-cast station pages are not available (they are not built from the gridded profiles). The casts below are listed from the compiled profiles; section and time-series links still work.</p>
{% endif %}
<table>
    <thead>
      <tr>
        <th>Cast</th>
        <th>File</th>
        <th>Start (UTC)</th>
        <th class="num">Latitude</th>
        <th class="num">Longitude</th>
        <th>Depth</th>
        <th class="num" title="Percent of samples flagged suspect or fail (QARTOD 3+4), across all QC'd variables">QC flagged</th>
        {% if ladcp_configured %}<th>LADCP</th>{% endif %}
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
    {% for s in stations %}
      <tr{% if not no_station_pages %} onclick="window.location='casts/cast_{{ s.cast_num }}.html'"{% endif %}>
        <td>{% if no_station_pages %}{{ s.cast_num }}{% else %}<a class="cast-link" href="casts/cast_{{ s.cast_num }}.html">{{ s.cast_num }}</a>{% endif %}</td>
        <td class="mono">{{ s.filename }}</td>
        <td>{{ s.time_start_str }}</td>
        <td class="num">{{ s.lat_str }}</td>
        <td class="num">{{ s.lon_str }}</td>
        <td><span class="depth-pill" style="background:{{ s.depth_bg }};color:{{ s.depth_fg }};">{{ s.max_depth_str }} dbar</span></td>
        <td class="num">{% if s.qc_pct is not none %}{{ s.qc_pct }}%{% else %}–{% endif %}</td>
        {% if ladcp_configured %}
        <td>{% if s.ladcp_has %}<span class="ladcp-yes">✓</span>{% else %}<span class="ladcp-no">–</span>{% endif %}</td>
        {% endif %}
        <td>
          {% if not no_station_pages %}<a class="pill-btn pill-profile" href="casts/cast_{{ s.cast_num }}.html">Profile</a>{% endif %}
          {% for sec in s.sections %}
          <a class="pill-btn" style="background:{{ sec.color }};color:#fff;" href="sections/section_{{ sec.name }}.html">{{ sec.name }}</a>
          {% endfor %}
          {% for ts in s.timeseries %}
          <a class="pill-btn" style="background:{{ ts.color }};color:#fff;" href="timeseries/timeseries_{{ ts.name }}.html">{{ ts.name }}</a>
          {% endfor %}
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>

{% if clock %}
<h2 id="s-clock">{{ m.heading_text(3, "Acquisition clock") }}</h2>
{% if clock.caption.start_line %}
<p>Time coordinate built from{% if clock.caption.source_variable %} <code>{{ clock.caption.source_variable }}</code>;{% endif %} the header start line reads <code>{{ clock.caption.start_line }}</code>.</p>
{% endif %}
<p><strong>{{ clock.coordinate_line }}</strong></p>
<p><strong>Verdict:</strong> {{ clock.kind }} — {{ clock.note }}</p>
{% if clock.caveat %}<p class="warn">Caveat: {{ clock.caveat }}</p>{% endif %}

{% if clock.kind in ["step", "constant", "drift"] %}
{% if clock.figure_b64 %}
<div class="fig-row center">
  <figure class="slot-full">
    <img src="data:image/png;base64,{{ clock.figure_b64 }}" alt="Clock offset (NMEA − System) per cast">
    {{- m.dbg(clock.figure_b64, "slot-full") }}
  </figure>
</div>
{% endif %}

{% if clock.suggested_yaml %}
<div class="clock-configs">
  <div><strong>Suggested</strong> — paste into your <code>config.yaml</code>, then re-run <code>ctdcast process config.yaml --stage 2 --force</code><pre>{{ clock.suggested_yaml }}</pre></div>
</div>
{% elif clock.kind in ["step", "constant"] and clock.correction_status == "on_gps" %}
<p>No correction suggested — the coordinate is already on GPS (NMEA); the measured offset is a comparison artefact, not applied.</p>
{% elif clock.kind in ["step", "constant"] and clock.correction_status == "undetermined" %}
<p>No correction suggested — the time-coordinate source could not be determined from the headers (no start_time bracket), so whether a correction applies is unknown.</p>
{% endif %}

<h3>Segments</h3>
<table>
  <thead><tr><th>Casts</th><th>First cast (UTC)</th><th class="num">Offset (s)</th><th class="num">sd (s)</th><th class="num">n</th></tr></thead>
  <tbody>
  {% for s in clock.segments %}
    <tr><td>{{ s.cast_range }}</td><td>{{ s.first_utc }}</td><td class="num">{{ s.offset }}</td><td class="num">{{ s.sd }}</td><td class="num">{{ s.n }}</td></tr>
  {% endfor %}
  </tbody>
</table>

<details>
  <summary>Per-cast clocks ({{ clock.casts|length }}) — both raw times, so the sign is checkable</summary>
  <table>
    <thead><tr><th>Cast</th><th>Start (UTC)</th><th>System</th><th>NMEA</th><th class="num">Offset (s)</th></tr></thead>
    <tbody>
    {% for c in clock.casts %}
      <tr><td>{{ c.cast_id }}</td><td>{{ c.start }}</td><td>{{ c.system }}</td><td>{{ c.nmea }}</td><td class="num">{{ c.offset }}</td></tr>
    {% endfor %}
    </tbody>
  </table>
</details>
{% endif %}
{% endif %}

{{ js_top_links | safe }}
{% endblock %}