{% extends "base.html" %}

{% block title %}Cruise Map — {{ cruise }}{% endblock %}
{% block masthead_title %}Cruise Map{% endblock %}
{% block masthead_type %}interactive map{% endblock %}

{% block head_extra %}
{% if leaflet_inline %}<style>{{ leaflet_css | safe }}</style>{% else %}<link rel="stylesheet" href="{{ leaflet_css_url }}">{% endif %}
<style>
  /* The map is a content element in the standard page column; its overlay
     panels anchor to the map (not the viewport) via the relative wrapper. */
  #map-wrap { position: relative; }
  #map {
    width: 100%; height: calc(100vh - 235px); min-height: 400px;
    border-radius: var(--radius-btn); overflow: hidden;
  }
  #info-panel {
    position: absolute; bottom: 12px; left: 12px; z-index: 1500;
    background: #fff; border-radius: 8px; padding: 0.8rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); max-width: 240px; min-width: 170px;
    font-size: 0.82rem; line-height: 1.6; color: #1a1a2e; pointer-events: all;
  }
  #info-panel.empty { color: #aaa; font-style: italic; }
  #info-panel a { display: block; margin-top: 0.3rem; color: #1a3a5c; font-weight: 600; text-decoration: none; }
  #info-panel a:hover { text-decoration: underline; }
  .cast-label {
    font-size: 8px; font-weight: 600; color: #111; white-space: nowrap;
    pointer-events: none; line-height: 1;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff;
  }
  #depth-legend {
    position: absolute; bottom: 12px; right: 12px; z-index: 1500;
    background: #fff; border-radius: 6px; padding: 0.5rem 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18); font-size: 0.72rem; color: #1a1a2e;
    line-height: 1.4;
  }
  #depth-legend .dl-title { font-weight: 700; margin-bottom: 0.25rem; }
  #depth-legend .dl-row { display: flex; align-items: center; gap: 5px; margin: 1px 0; }
  #depth-legend .dl-swatch { width: 12px; height: 9px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }
</style>
{% endblock %}

{% block content %}
<div id="map-wrap">
  <div id="map"></div>
  <div id="info-panel" class="empty">Hover over a cast or section.</div>
  {% if depth_legend_html %}<div id="depth-legend">{{ depth_legend_html | safe }}</div>{% endif %}
</div>

{% if leaflet_inline %}<script>{{ leaflet_js | safe }}</script>{% else %}<script src="{{ leaflet_js_url }}"></script>{% endif %}
<script>
var CASTS    = {{ casts_json | safe }};
var SECTIONS = {{ sections_json | safe }};
var GEBCO_B64    = {{ gebco_b64_json | safe }};
var GEBCO_BOUNDS = {{ gebco_bounds_json | safe }};
var CONTOURS     = {{ contours_json | safe }};
var SHIP_TRACK   = {{ ship_track_json | safe }};
var DATA_BOUNDS  = [[{{ lat_min }}, {{ lon_min }}], [{{ lat_max }}, {{ lon_max }}]];

var map = L.map('map', { zoomSnap: 0.25, zoomControl: false });
L.control.zoom({ position: 'topright' }).addTo(map);
// Expand the initial view longitude so the map fills a widescreen without
// large empty side margins.  At latitude φ, 1° lon = cos(φ) × 1° lat in
// Mercator distance.  We compute the lon span needed to fill the viewport at
// the screen aspect ratio and use whichever is wider.
(function() {
  var meanLat = (DATA_BOUNDS[0][0] + DATA_BOUNDS[1][0]) / 2;
  var cosLat  = Math.cos(meanLat * Math.PI / 180);
  var dataLatSpan = DATA_BOUNDS[1][0] - DATA_BOUNDS[0][0];
  var dataLonSpan = DATA_BOUNDS[1][1] - DATA_BOUNDS[0][1];
  var mapEl = document.getElementById('map');
  var screenAspect = mapEl.clientWidth / Math.max(1, mapEl.clientHeight);
  var targetLonSpan = Math.max(
    dataLonSpan + 0.5,
    screenAspect * dataLatSpan / cosLat
  );
  // Don't expand past the bathymetry we actually have, or grey bars appear on
  // the sides where GEBCO does not cover.  Cap the view at the GEBCO extent.
  if (GEBCO_BOUNDS) {
    var gebcoLonSpan = GEBCO_BOUNDS[1][1] - GEBCO_BOUNDS[0][1];
    targetLonSpan = Math.min(targetLonSpan, gebcoLonSpan);
  }
  var midLon = (DATA_BOUNDS[0][1] + DATA_BOUNDS[1][1]) / 2;
  var viewBounds = [
    [DATA_BOUNDS[0][0], midLon - targetLonSpan / 2],
    [DATA_BOUNDS[1][0], midLon + targetLonSpan / 2]
  ];
  map.fitBounds(viewBounds, { padding: [20, 20] });
})();

if (GEBCO_B64) {
  L.imageOverlay('data:image/png;base64,' + GEBCO_B64, GEBCO_BOUNDS, {
    opacity: 1.0, interactive: false
  }).addTo(map);
}

if (CONTOURS) {
  L.geoJSON(CONTOURS, {
    interactive: false,
    style: function(feature) {
      var major = feature.properties.major;
      return {
        color: '#1a1a2e',
        weight: major ? 1.2 : 0.4,
        opacity: major ? 0.6 : 0.35,
      };
    }
  }).addTo(map);
}

if (SHIP_TRACK && SHIP_TRACK.length > 1) {
  L.polyline(SHIP_TRACK, {
    color: '#888', weight: 1.5, opacity: 0.45, interactive: false
  }).addTo(map);
}

var panel = document.getElementById('info-panel');
function showPanel(html) {
  panel.className = '';
  panel.innerHTML = html;
}

SECTIONS.forEach(function(s) {
  L.polyline(s.latlons, { color: s.color, weight: 3, opacity: 0.85 })
    .on('mouseover', function() { showPanel(s.info); })
    .on('click',     function() { window.location.href = s.url; })
    .addTo(map);
});

CASTS.forEach(function(c) {
  L.circleMarker([c.lat, c.lon], {
    radius: 7, color: 'white', weight: 1.5, fillColor: c.color, fillOpacity: 0.92
  })
    .on('mouseover', function() { showPanel(c.info); })
    .on('click',     function() { window.location.href = c.url; })
    .addTo(map);

  // Cast number label offset just to the right of the dot
  L.marker([c.lat, c.lon], {
    icon: L.divIcon({
      className: '',
      html: '<span class="cast-label">' + c.num + '</span>',
      iconAnchor: [-9, 4],
    }),
    interactive: false,
    keyboard: false,
  }).addTo(map);
});
</script>
{% endblock %}