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

{% block title %}CTD Report — {{ cruise }}{% endblock %}
{% block masthead_type %}CTD Report{% endblock %}

{% block head_extra %}
<style>
.file-pill {
  display: inline-block; background: var(--role-component); color: #fff;
  padding: 0.2rem 0.7rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.78rem;
  text-decoration: none; margin: 0.1rem 0.05rem;
}
.file-pill:hover { opacity: 0.85; }
.inventory-strip { margin: 0 0 1rem; }
.inventory-strip .label { font-size: var(--fs-note); color: var(--muted); margin-right: 0.4rem; }
</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 project %}<div><dt>Project</dt><dd>{{ project }}</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 n_days %}<div><dt>Duration</dt><dd>{{ n_days }} d</dd></div>{% endif %}
    <div><dt>CTD casts</dt><dd>{{ n_casts }}</dd></div>
    <div><dt>Sections</dt><dd>{{ n_sections }}</dd></div>
    <div><dt>Max depth</dt><dd>{{ max_depth_str }}</dd></div>
  </dl>
{% endblock %}

{% block content %}
{% if inventory_datasets %}
<div class="inventory-strip">
  <span class="label">Data inventory:</span>
  {% for d in inventory_datasets %}<a class="file-pill" href="{{ d.href }}">{{ d.label }}</a>{% endfor %}
</div>
{% endif %}
{% if station_pages_note %}
<p class="warn">{{ station_pages_note }}</p>
{% endif %}

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

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