{% extends "area_base.html" %}

{% block title %}{{ page.title if page else 'Formation' }} | 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>
{% endblock %}

{% block area_content %}
<h1>{{ page.title if page else 'Formation' }}</h1>
{% if page and page.body %}
  <p>{{ page.body | nl2br }}</p>
{% endif %}

<div id="formation-map"></div>

{% for era in eras %}
<section class="era" id="era-{{ loop.index }}">
  <div class="era__header">
    <h2 class="era__church">{{ era.church_name }}</h2>
    <span class="era__denomination era__denomination--{{ era.denomination | lower }}">{{ era.denomination }}</span>
    <span class="era__dates">
      {{ era.started.year }}{% if era.ended %} &ndash; {{ era.ended.year }}{% else %} &ndash; present{% endif %}
    </span>
  </div>

  {% if era.narrative %}
  <div class="era__narrative">{{ era.narrative | nl2br }}</div>
  {% endif %}

  {% if era.events %}
  <ul class="era__events">
    {% for event in era.events %}
    <li class="era__event">
      <span class="era__event-rite">{{ event.sacrament }}</span>
      {% if event.occurred %}<span class="era__event-date">{{ event.occurred.year }}</span>{% endif %}
      {% if event.notes %}<span class="era__event-note">{{ event.notes }}</span>{% endif %}
    </li>
    {% endfor %}
  </ul>
  {% endif %}

  {% if era.roles %}
  <ul class="era__roles">
    {% for role in era.roles %}
    <li class="era__role">
      <span class="era__role-title">{{ role.title }}</span>
      <span class="era__role-dates">
        {{ role.started.year }}{% if role.ended and role.ended.year != role.started.year %} &ndash; {{ role.ended.year }}{% elif not role.ended %} &ndash; present{% endif %}
      </span>
      {% if role.description %}<span class="era__role-desc">{{ role.description }}</span>{% endif %}
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</section>
{% endfor %}

<script>
  const eras = [
    {% for era in eras %}
    {
      church: {{ era.church_name | tojson }},
      denomination: {{ era.denomination | tojson }},
      lat: {{ era.latitude | tojson }},
      lng: {{ era.longitude | tojson }},
      index: {{ loop.index }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  // Denomination → position on the Protestant–Catholic spectrum (hue, HSL)
  // Baptist red (0), Methodist yellow (50), Anglican green (120), Catholic blue (220)
  const DENOM_COLOUR = {
    "Baptist":   "#5B9BD5",
    "Methodist": "#E11B22",
    "Anglican":  "#9B72B0"
  };
  function hueToColour(h) {
    return "hsl(" + h + ", 70%, 45%)";
  }

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

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

  const allLayers = L.featureGroup();

  // Church markers, coloured by denomination, click scrolls to the section.
  eras.slice().reverse().forEach(function(era) {
    const marker = L.circleMarker([era.lat, era.lng], {
      radius: 7,
      fillColor: DENOM_COLOUR[era.denomination] || "#888",
      color: "#fff",
      weight: 1.5,
      opacity: 1,
      fillOpacity: 0.95
    }).bindPopup("<strong>" + era.church + "</strong><br>" + era.denomination);

    marker.on("click", function() {
      const section = document.getElementById("era-" + era.index);
      if (section) { section.scrollIntoView({ behavior: "smooth", block: "start" }); }
    });

    marker.addTo(map);
    allLayers.addLayer(marker);
  });

  if (allLayers.getLayers().length > 0) {
    map.fitBounds(allLayers.getBounds(), { padding: [30, 30] });
  } else {
    map.setView([51.5, -1.5], 6);
  }
</script>
{% endblock %}