{% extends "base.html" %}

{% block title %}{{ section_name }}{% if section_description %} — {{ section_description }}{% endif %} — {{ cruise }}{% endblock %}
{% block masthead_title %}{{ section_name }}{% if section_description %} — {{ section_description }}{% endif %}{% endblock %}
{% block masthead_type %}Section{% endblock %}

{% block head_extra %}
<style>
/* Section 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 }}sections.html">Sections</a>
    <span class="sep">›</span>
    <span>{{ section_name }}{% if section_description %} — {{ section_description }}{% endif %}</span>
  </nav>
  <div class="nav-btns">
    {% if prev_name %}<a class="btn-nav" href="section_{{ prev_name }}.html">← {{ prev_name }}</a>{% endif %}
    {% if next_name %}<a class="btn-nav" href="section_{{ 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>Description</dt><dd>{{ section_description }}</dd></div>
    <div><dt>CTD casts</dt><dd>{{ cast_list_str }}</dd></div>
    <div><dt>Distance</dt><dd>{{ dist_str }}</dd></div>
    <div><dt>Max depth</dt><dd>{{ p_max_str }}</dd></div>
    <div><dt>Start position</dt><dd>{{ start_pos }}</dd></div>
    <div><dt>Start time</dt><dd>{{ start_time }}</dd></div>
    <div><dt>End position</dt><dd>{{ end_pos }}</dd></div>
    <div><dt>End time</dt><dd>{{ end_time }}</dd></div>
  </dl>
{% endblock %}

{% block content %}
<div class="jump-nav">
  {% if fig_map_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>

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

{% macro section_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.short }}</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.short }}</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 }}">
  </figure>
</div>
{% endif %}{% endfor %}
{% endif %}
{% endif %}
{% endmacro %}

{{ section_panel_group(physics_panels, section_slot, "s-physics", "Hydrography") }}
{{ section_panel_group(biogeo_panels, section_slot, "s-biogeo", "Biogeochemistry") }}

{% for card in extra_cards %}
<h2 id="s-{{ card.id }}">{{ card.title }}</h2>
{% if card.id == "ladcp" %}
{{ section_panel_group(card.panels, section_slot, "", "") }}
{% elif card.panels | length == 1 %}
{% if card.panels[0].b64 %}
<div class="fig-row">
  <figure class="{{ section_slot }}">
    <img src="data:image/png;base64,{{ card.panels[0].b64 }}" alt="{{ card.panels[0].title }}">
  </figure>
</div>
{% endif %}
{% else %}
{% if card.panels | selectattr("b64") | list %}
<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>
{% endif %}
{% endif %}
{% endfor %}

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