{% extends "area_base.html" %}

{% block title %}{{ page.title if page else 'Hill & Moorland Leadership' }} | TheOrganist24{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
  .mt-layout {
    --mt-accent: #2f6b3c;
    --mt-select: #c0532f;
    --mt-border: rgba(0, 0, 0, 0.14);
    --mt-muted: rgba(0, 0, 0, 0.58);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
    margin: 1.5rem 0;
  }

  #mt-map {
    height: 460px;
    border: 1px solid var(--mt-border);
    border-radius: 6px;
  }

  .mt-info {
    border: 1px solid var(--mt-border);
    border-radius: 6px;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.45);
  }

  .mt-info__title {
    margin: 0 0 0.15rem;
    font-size: 1.3rem;
    line-height: 1.25;
  }

  .mt-info__date {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--mt-muted);
  }

  .mt-info__desc {
    margin: 0 0 1.1rem;
    line-height: 1.55;
  }

  .mt-info__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 1.25rem;
    margin: 0;
  }

  .mt-info__meta > div {
    border-top: 1px solid var(--mt-border);
    padding-top: 0.4rem;
  }

  .mt-info__meta dt {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mt-muted);
  }

  .mt-info__meta dd {
    margin: 0.15rem 0 0;
    font-weight: 600;
  }

  .mt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 2rem;
    font-size: 0.95rem;
  }

  .mt-table th,
  .mt-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--mt-border);
  }

  .mt-table th {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mt-muted);
    border-bottom-width: 2px;
  }

  .mt-table td:last-child {
    text-align: right;
    white-space: nowrap;
    color: var(--mt-muted);
  }

  .mt-row {
    cursor: pointer;
    transition: background 0.12s ease;
  }

  .mt-row:hover {
    background: rgba(47, 107, 60, 0.07);
  }

  .mt-row--active {
    background: rgba(47, 107, 60, 0.14);
  }

  .mt-row--active td:first-child {
    box-shadow: inset 3px 0 0 0 var(--mt-select);
    font-weight: 600;
  }

  @media (max-width: 860px) {
    .mt-layout {
      grid-template-columns: 1fr;
    }
    #mt-map {
      height: 320px;
    }
  }
</style>
{% endblock %}

{% block area_content %}
<h1>{{ page.title if page else 'Hill & Moorland Leadership' }}</h1>
{% if page and page.body %}
  <p>{{ page.body }}</p>
{% endif %}

{% if qualifying_hikes %}
<div class="mt-layout">
  <div id="mt-map"></div>

  <div class="mt-info">
    <h2 class="mt-info__title" id="mt-info-title"></h2>
    <p class="mt-info__date" id="mt-info-date"></p>
    <p class="mt-info__desc" id="mt-info-desc"></p>
    <dl class="mt-info__meta">
      <div><dt>Style</dt><dd id="mt-info-style"></dd></div>
      <div><dt>Terrain quality</dt><dd id="mt-info-quality"></dd></div>
      <div><dt>Weather</dt><dd id="mt-info-weather"></dd></div>
      <div><dt>Wind</dt><dd id="mt-info-wind"></dd></div>
      <div><dt>Camping</dt><dd id="mt-info-camping"></dd></div>
      <div><dt>Nights under canvas</dt><dd id="mt-info-nights"></dd></div>
    </dl>
  </div>
</div>

<table class="mt-table">
  <thead>
    <tr>
      <th scope="col">Expedition</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tbody>
    {% for hike in qualifying_hikes %}
    <tr class="mt-row" data-hike-id="{{ loop.index0 }}">
      <td>{{ hike.title }}</td>
      <td>{{ hike.expedition_date.strftime('%-d %b %Y') }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script>
  const hikes = [
    {% for hike in qualifying_hikes %}
    {
      id: {{ loop.index0 }},
      title: {{ hike.title | tojson }},
      date: {{ hike.expedition_date.isoformat() | tojson }},
      date_display: {{ hike.expedition_date.strftime('%-d %B %Y') | tojson }},
      description: {{ hike.description | tojson }},
      style: {{ hike.style | tojson }},
      quality_type: {{ hike.quality_type | tojson }},
      weather: {{ hike.weather | tojson }},
      wind: {{ hike.wind | tojson }},
      camping_type: {{ hike.camping_type | tojson }},
      nights_camping: {{ hike.nights_camping | tojson }},
      geojson: {{ hike.geojson | tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  const hikeById = {};
  hikes.forEach(function (h) { hikeById[h.id] = h; });

  const baseStyle = { color: "#2f6b3c", weight: 3, opacity: 0.75 };
  const selStyle  = { color: "#c0532f", weight: 5, opacity: 1 };

  const map = L.map("mt-map");

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap contributors"
  }).addTo(map);

  // One layer per hike; remember bounds for zoom-to and fit-all.
  const hikeLayers = {};
  const allBounds = L.latLngBounds([]);

  hikes.forEach(function (hike) {
    if (!hike.geojson) { return; }
    const layer = L.geoJSON(JSON.parse(hike.geojson), { style: baseStyle });
    layer.on("click", function () { selectHike(hike.id, false); });
    layer.addTo(map);
    hikeLayers[hike.id] = layer;
    allBounds.extend(layer.getBounds());
  });

  if (allBounds.isValid()) {
    map.fitBounds(allBounds, { padding: [25, 25] });
  } else {
    map.setView([54.5, -3.0], 6);
  }

  function setText(id, value) {
    document.getElementById(id).textContent = value;
  }

  function renderInfo(hike) {
    setText("mt-info-title", hike.title);
    setText("mt-info-date", hike.date_display);
    setText("mt-info-desc", hike.description);
    setText("mt-info-style", hike.style);
    setText("mt-info-quality", hike.quality_type);
    setText("mt-info-weather", hike.weather);
    setText("mt-info-wind", hike.wind);
    setText("mt-info-camping", hike.camping_type);
    setText(
      "mt-info-nights",
      hike.nights_camping + (hike.nights_camping === 1 ? " night" : " nights")
    );
  }

  function selectHike(id, zoom) {
    const hike = hikeById[id];
    if (!hike) { return; }

    Object.keys(hikeLayers).forEach(function (key) {
      hikeLayers[key].setStyle(Number(key) === id ? selStyle : baseStyle);
    });
    if (hikeLayers[id]) { hikeLayers[id].bringToFront(); }

    document.querySelectorAll(".mt-row").forEach(function (row) {
      row.classList.toggle(
        "mt-row--active",
        Number(row.getAttribute("data-hike-id")) === id
      );
    });

    renderInfo(hike);

    if (zoom && hikeLayers[id]) {
      map.fitBounds(hikeLayers[id].getBounds(), { padding: [40, 40] });
    }
  }

  // Table row -> populate + zoom.
  document.querySelectorAll(".mt-row").forEach(function (row) {
    row.addEventListener("click", function () {
      selectHike(Number(row.getAttribute("data-hike-id")), true);
    });
  });

  // Default to the most recent expedition (ISO dates sort lexically).
  let mostRecent = hikes[0];
  hikes.forEach(function (h) {
    if (h.date > mostRecent.date) { mostRecent = h; }
  });
  selectHike(mostRecent.id, false);
</script>
{% else %}
<p>No qualifying expeditions are currently logged.</p>
{% endif %}

{% include "_offerings.html" %}

{% endblock %}