{% extends "base.html" %}
{% import "_macros.html" as m %}
{% block title %}{{ array_name }} – array summary{% endblock %}
{% block page_styles %}
  /* Table + caption styles are canonical in emit_css now. */
  .meta-grid div { font-size:0.82rem; }
  .btn { display:inline-block; padding:0.15em 0.55em; border-radius:4px; font-size:0.75rem;
         font-weight:700; text-decoration:none; color:#fff; margin:0 0.15rem 0.2rem 0; }
  .btn-sum { background:#2c3e50; }
  .btn-stk { background:#2980b9; }
  .btn-grd { background:#8e44ad; }
  .btn-miss { background:#bbb; cursor:default; pointer-events:none; }
  .fig { max-width:60%; display:block; margin:0.5rem auto 1rem; border:1px solid var(--rule); border-radius:4px; }
{% endblock %}
{% block masthead_title %}{{ array_name }}{% endblock %}
{% block masthead_type %}Array{% endblock %}
{% block masthead_nav %}{% endblock %}
{% block masthead_meta %}
    {% if year %}<div><dt>Year</dt><dd>{{ year }}</dd></div>{% endif %}
    {% if cruise %}<div><dt>Cruise</dt><dd>{{ cruise }}</dd></div>{% endif %}
    {% if ship %}<div><dt>Ship</dt><dd>{{ ship }}</dd></div>{% endif %}
    {% if project %}<div><dt>Project</dt><dd>{{ project }}</dd></div>{% endif %}
    {% if deploy_time %}<div><dt>Deployment</dt><dd>{{ deploy_time }}</dd></div>{% endif %}
    {% if recover_time %}<div><dt>Recovery</dt><dd>{{ recover_time }}</dd></div>{% endif %}
    <div><dt>Moorings</dt><dd>{{ moorings | length }}</dd></div>
  {% endblock %}
{% block content %}

<p class="caption" style="margin:0 0 0.8rem">
  Jump to:
  <a href="#moorings">Moorings</a> &bull;
  <a href="#type-summary">Instrument summary</a> &bull;
  <a href="#completeness">Completeness</a>
</p>

{% if fig_map_b64 %}
<h2>Mooring positions</h2>
<img class="fig" src="data:image/png;base64,{{ fig_map_b64 }}" alt="Array map">
{{- m.dbg(fig_map_b64, "max-width 60%") }}
{% endif %}

<h2 id="moorings">Moorings</h2>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Mooring</th>
      <th class="num">Latitude</th>
      <th class="num">Longitude</th>
      <th class="num">Depth&nbsp;(m)</th>
      <th>Deployment</th>
      <th>Recovery</th>
      <th class="num">Duration</th>
      <th class="num">Instruments</th>
      <th>Reports</th>
    </tr>
  </thead>
  <tbody>
  {% for r in moorings %}
  <tr>
    <td class="num">{% if r.color_hex %}<span style="display:inline-block;width:0.75em;height:0.75em;border-radius:50%;background:{{ r.color_hex }};margin-right:0.35em;vertical-align:middle"></span>{% endif %}{{ r.position }}</td>
    <td><strong>{{ r.mooring }}</strong></td>
    <td class="num">{{ "%.4f"|format(r.lat) if r.lat is not none else "—" }}</td>
    <td class="num">{{ "%.4f"|format(r.lon) if r.lon is not none else "—" }}</td>
    <td class="num">{{ r.waterdepth if r.waterdepth else "—" }}</td>
    <td>{{ r.deploy_time }}</td>
    <td>{{ r.recover_time }}</td>
    <td class="num">{{ r.duration }}</td>
    <td class="num">{{ r.n_instruments }}</td>
    <td>
      {% if r.report_exists %}
        <a class="btn btn-sum" href="{{ r.report_href }}">Summary</a>
      {% else %}
        <span class="btn btn-miss">Summary</span>
      {% endif %}
      {% if r.stack_exists %}
        <a class="btn btn-stk" href="{{ r.stack_href }}">Stack</a>
      {% endif %}
      {% if r.grid_exists %}
        <a class="btn btn-grd" href="{{ r.grid_href }}">Grid</a>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
  </tbody>
</table>

{% if type_summary %}
<h2 id="type-summary">Instrument type summary</h2>
<table>
  <thead>
    <tr>
      <th>Type</th>
      <th class="num">Deployed</th>
      <th class="num">Complete&nbsp;(Stage&nbsp;3&nbsp;✓)</th>
      <th class="num">Skipped&nbsp;/&nbsp;no&nbsp;raw</th>
      <th class="num">Stopped&nbsp;early</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
  {% for row in type_summary %}
  <tr>
    <td>{{ row.itype }}</td>
    <td class="num">{{ row.deployed }}</td>
    <td class="num">{{ row.complete }}</td>
    <td class="num">{{ row.skipped }}</td>
    <td class="num">{{ row.stopped_early }}</td>
    <td>{{ row.notes }}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}

{% if mooring_completeness %}
<h2 id="completeness">Data completeness by mooring</h2>
<table>
  <thead>
    <tr>
      <th>Mooring</th>
      <th class="num">Depth&nbsp;(m)</th>
      <th class="num">Deployed</th>
      <th class="num">Complete</th>
      <th class="num">Skipped</th>
      <th class="num">Stopped&nbsp;early</th>
      <th>Deployment&nbsp;(UTC)</th>
      <th>Recovery&nbsp;(UTC)</th>
      <th class="num">Duration</th>
    </tr>
  </thead>
  <tbody>
  {% for row in mooring_completeness %}
  <tr>
    <td><strong>{{ row.mooring }}</strong></td>
    <td class="num">{{ row.waterdepth if row.waterdepth else "—" }}</td>
    <td class="num">{{ row.deployed }}</td>
    <td class="num">{{ row.complete }}</td>
    <td class="num">{{ row.skipped }}</td>
    <td class="num">{{ row.stopped_early }}</td>
    <td>{{ row.deploy_time }}</td>
    <td>{{ row.recover_time }}</td>
    <td class="num">{{ row.duration }}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}

{% endblock %}