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

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

{% block head_extra %}
<style>
/* Timeseries index */
.ts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.ts-card {
  background: #fff; border-radius: 8px; border-left: 4px solid var(--ocean);
  padding: 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ts-card h3 { font-size: var(--fs-h2); color: var(--ocean); margin: 0 0 0.25rem; }
.ts-card .desc { font-size: var(--fs-meta); color: var(--gray-5); margin-bottom: 0.5rem; }
.ts-card .info { font-size: var(--fs-note); color: var(--gray-4); }
.btn-card {
  display: inline-block; background: var(--role-aggregate-b); color: #fff;
  padding: 0.25rem 0.8rem; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-nav); margin-top: 0.6rem;
}
.btn-card: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; }
</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>Timeseries groups</dt><dd>{{ timeseries|length }}</dd></div>
    {% if ts_casts_range %}<div><dt>Casts per group</dt><dd>{{ ts_casts_range }}</dd></div>{% endif %}
    {% if ts_dur_range %}<div><dt>Duration range</dt><dd>{{ ts_dur_range }}</dd></div>{% endif %}
  </dl>
{% endblock %}

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

<h2 id="s-list">{{ m.heading_text(2, "Timeseries groups") }}</h2>
<div class="ts-grid">
{% for ts in timeseries %}
<div class="ts-card" style="border-left-color:{{ ts.color }}">
  <h3>{{ ts.name }}</h3>
  <div class="desc">{{ ts.description }}</div>
  <div class="info">{{ ts.n_casts }} casts &nbsp;·&nbsp; {{ ts.cast_range }}</div>
  {% if ladcp_configured %}
  <div style="margin-top:0.4rem;">
    {% if ts.ladcp_has %}<span class="ladcp-yes">✓ LADCP</span>{% else %}<span class="ladcp-no">– LADCP</span>{% endif %}
  </div>
  {% endif %}
  {% if ts.report_exists %}
  <a class="btn-card" href="timeseries/timeseries_{{ ts.name }}.html">view timeseries →</a>
  {% else %}
  <span style="font-size:var(--fs-nav);color:var(--gray-3);margin-top:0.4rem;display:inline-block;">report not yet generated</span>
  {% endif %}
</div>
{% endfor %}
{% if not timeseries %}
<p style="color:var(--gray-4)">No timeseries groups configured.</p>
{% endif %}
</div>

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