{% extends "base.html" %}
{% import "_macros.html" as m %}

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

{{ m.report_body(report, center_sections=["map"]) }}

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