{% extends "base.html" %}

{% block title %}{{ ts_name }}{% if ts_description %} — {{ ts_description }}{% endif %} — {{ cruise }}{% endblock %}
{% block masthead_title %}{{ ts_name }}{% if ts_description %} — {{ ts_description }}{% endif %}{% endblock %}
{% block masthead_type %}Timeseries{% endblock %}

{% block head_extra %}
<style>
/* Timeseries page */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; font-size: 0.85rem;
}
.breadcrumb a { color: var(--ocean); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--muted); margin: 0 0.25rem; }
.cast-pill {
  display: inline-block; background: #4a6fa5; color: #fff;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; text-decoration: none; margin: 0.1rem 0.05rem;
}
.cast-pill:hover { opacity: 0.85; }
</style>
{% endblock %}

{% block topbar %}
<div class="topbar">
  <nav class="breadcrumb">
    <a href="{{ nav_prefix }}index.html">Index</a>
    <span class="sep">›</span>
    <a href="{{ nav_prefix }}timeseries.html">Timeseries</a>
    <span class="sep">›</span>
    <span>{{ ts_name }}{% if ts_description %} — {{ ts_description }}{% endif %}</span>
  </nav>
  <div class="nav-btns">
    {% if prev_name %}<a class="btn-nav" href="timeseries_{{ prev_name }}.html">← {{ prev_name }}</a>{% endif %}
    {% if next_name %}<a class="btn-nav" href="timeseries_{{ next_name }}.html">{{ next_name }} →</a>{% endif %}
  </div>
</div>
{% endblock %}

{% block masthead_meta %}
  <dl class="meta-grid">
    <div><dt>Cruise</dt><dd>{{ cruise }}</dd></div>
    <div><dt>Ship</dt><dd>{{ ship }}</dd></div>
    <div><dt>CTD casts</dt><dd>{{ n_casts }}</dd></div>
    <div><dt>Start</dt><dd>{{ time_start_str }}</dd></div>
    <div><dt>End</dt><dd>{{ time_end_str }}</dd></div>
    <div><dt>Duration</dt><dd>{{ duration_str }}</dd></div>
  </dl>
{% endblock %}

{% block content %}
<div class="jump-nav">
  {% if fig_location_b64 %}<a href="#s-map">Map</a>{% endif %}
  {% if physics_panels | selectattr("b64") | list %}<a href="#s-physics">Hydrography</a>{% endif %}
  {% if biogeo_panels | selectattr("b64") | list %}<a href="#s-biogeo">Biogeochemistry</a>{% endif %}
  {% for card in extra_cards %}<a href="#s-{{ card.id }}">{{ card.short }}</a>{% endfor %}
</div>

<div style="margin-bottom:1rem;">
  {% for cn in cast_nums %}
  <a class="cast-pill" href="{{ nav_prefix }}casts/cast_{{ cn }}.html">{{ cn }}</a>
  {% endfor %}
</div>

{% macro ts_panel_group(panels, slot, anchor, heading) %}
{% if panels | selectattr("b64") | list %}
{% if heading %}<h2 id="{{ anchor }}">{{ heading }}</h2>{% endif %}
{% if slot == "slot-third" %}
<div class="fig-row">
  {% for panel in panels %}{% if panel.b64 %}
  <figure class="{{ slot }}">
    <img src="data:image/png;base64,{{ panel.b64 }}" alt="{{ panel.title }}">
    <figcaption>{{ panel.title }}</figcaption>
  </figure>
  {% endif %}{% endfor %}
</div>
{% elif slot == "slot-half" %}
{% for row in panels | batch(2, None) %}
<div class="fig-row">
  {% for panel in row %}{% if panel and panel.b64 %}
  <figure class="{{ slot }}">
    <img src="data:image/png;base64,{{ panel.b64 }}" alt="{{ panel.title }}">
    <figcaption>{{ panel.title }}</figcaption>
  </figure>
  {% endif %}{% endfor %}
</div>
{% endfor %}
{% else %}
{% for panel in panels %}{% if panel.b64 %}
<div class="fig-row">
  <figure class="{{ slot }}">
    <img src="data:image/png;base64,{{ panel.b64 }}" alt="{{ panel.title }}">
    <figcaption>{{ panel.title }}</figcaption>
  </figure>
</div>
{% endif %}{% endfor %}
{% endif %}
{% endif %}
{% endmacro %}

{% if fig_location_b64 %}
<h2 id="s-map">Map</h2>
<div class="fig-row">
  <figure class="slot-third">
    <img src="data:image/png;base64,{{ fig_location_b64 }}" alt="Yoyo location map">
  </figure>
</div>
{% endif %}

{{ ts_panel_group(physics_panels, ts_slot, "s-physics", "Hydrography") }}
{{ ts_panel_group(biogeo_panels, ts_slot, "s-biogeo", "Biogeochemistry") }}

{% if not physics_panels and not biogeo_panels %}
<p style="color:#888">No data available for these casts.</p>
{% endif %}

{% for card in extra_cards %}
<h2 id="s-{{ card.id }}">{{ card.title }}</h2>
{% if card.id == "ts" %}
<div class="fig-row">
  {% for panel in card.panels %}{% if panel.b64 %}
  <figure class="slot-third">
    <img src="data:image/png;base64,{{ panel.b64 }}" alt="{{ panel.title }}">
    <figcaption>{{ panel.title }}</figcaption>
  </figure>
  {% endif %}{% endfor %}
</div>
{% else %}
{{ ts_panel_group(card.panels, ts_slot, "", "") }}
{% endif %}
{% endfor %}

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