{% extends "main.html" %}
{% block content %}
{{ super() }}
<div class="md-typeset">

<p class="calendar-data-links">
  <a href="/calendar.ics">📅 iCal feed</a> ·
  <a href="/data/events.json">📋 JSON export</a> ·
  <a href="/data/organisations.json">🏛 Org data</a>
</p>

<p class="calendar-subscribe">
  <a href="/calendar.ics" id="calendar-subscribe-link" class="hero-cta-btn hero-cta-primary">📅 Subscribe (.ics)</a>
  <a href="webcal://" id="calendar-subscribe-apple" class="hero-cta-btn" title="Opens in Apple Calendar or Outlook">Apple / Outlook</a>
  <a href="https://calendar.google.com/" id="calendar-subscribe-google" class="hero-cta-btn" target="_blank" rel="noopener" title="Opens Google Calendar's Add by URL screen">Google Calendar</a>
  <span id="calendar-subscribe-hint" class="calendar-subscribe-hint">Add this URL to Google Calendar, Outlook, or Apple Calendar to get every event below automatically.</span>
</p>

{% set type_icons = {
  'conference': '🎤', 'workshop': '🛠️', 'meetup': '🤝',
  'meeting': '📋', 'assembly': '🏛️', 'lecture': '🎓',
  'launch': '🚀', 'rally': '📢', 'milestone': '📌'
} %}
{%- set grouped = {} %}
{%- for e in calendar_events %}
  {%- set month_key = e.date.strftime('%B %Y') %}
  {%- if month_key not in grouped %}{% set _ = grouped.update({month_key: []}) %}{% endif %}
  {%- set _ = grouped[month_key].append(e) %}
{%- endfor %}

{%- if not calendar_events %}
<p><em>No upcoming events are currently known. Orgs with an <code>ics_feed:</code> or manually curated <code>events:</code> entries will appear here once synced — see <a href="/organisations/">Democracy Landscape</a>.</em></p>
{%- else %}

<div class="calendar-filter-bar">
  <label class="calendar-filter-label">Filter by country:</label>
  <select id="calendar-country-filter" class="org-filter-select">
    <option value="all">All countries</option>
  </select>
  <button id="calendar-country-reset" class="calendar-reset-btn" title="Show all countries">✕ Reset</button>
  <span id="calendar-filter-count" class="calendar-filter-count"></span>
</div>

{%- set country_entries = [] %}
{%- for e in calendar_events %}
  {%- if e.country %}
    {%- set entry = {'code': e.country, 'name': e.country | country_name, 'flag': e.country | country_flag} %}
    {%- if entry not in country_entries %}{% set _ = country_entries.append(entry) %}{% endif %}
  {%- endif %}
{%- endfor %}
{%- set country_entries = country_entries | sort(attribute='name') %}

{%- set feed_rows = [{'flag': '📅', 'name': 'All countries', 'path': '/calendar.ics'}] %}
{%- for c in country_entries %}
  {%- set _ = feed_rows.append({'flag': c.flag, 'name': c.name, 'path': '/calendar-' + c.code + '.ics'}) %}
{%- endfor %}

<details class="calendar-feeds-details">
  <summary>📡 All iCal feeds ({{ feed_rows | length }})</summary>
  <table class="calendar-feeds-table">
    <thead>
      <tr><th>Country</th><th>Download</th><th>Apple / Outlook</th><th>Google Calendar</th></tr>
    </thead>
    <tbody>
      {%- for r in feed_rows %}
      <tr data-ics-path="{{ r.path }}">
        <td>{{ r.flag }} {{ r.name }}</td>
        <td><a class="calendar-feed-btn calendar-feed-btn--ics" href="{{ r.path }}">Download .ics</a></td>
        <td><a class="calendar-feed-btn calendar-feed-btn--apple calendar-feed-apple-link" href="webcal://">Apple / Outlook</a></td>
        <td><a class="calendar-feed-btn calendar-feed-btn--google calendar-feed-google-link" href="https://calendar.google.com/" target="_blank" rel="noopener">Google Calendar</a></td>
      </tr>
      {%- endfor %}
    </tbody>
  </table>
</details>

<div id="calendar-past-events-slot"></div>

{%- for month_key, month_events in grouped.items() %}
<h2 class="calendar-month-heading">{{ month_key }}</h2>
<ul class="calendar-event-list">
  {%- for e in month_events %}
  <li class="calendar-event{% if e.notable %} calendar-event--notable{% endif %}" data-country="{{ e.country or '' }}" data-country-label="{{ e.country | country_flag }} {{ e.country | country_name }}" data-date="{{ e.date.isoformat() }}">

    <div class="calendar-date-block">
      <span class="calendar-date-month">{{ e.date.strftime('%b') }}</span>
      <span class="calendar-date-day">{{ e.date.strftime('%d') }}</span>
      <span class="calendar-date-weekday">{{ e.date.strftime('%a') }}</span>
      <span class="activity-method-chip method-{{ e.source }} calendar-source-chip--mini">{{ e.source }}</span>
    </div>

    <div class="calendar-event-body">
      <div class="calendar-event-header">
        {%- if e.type %}<span class="calendar-event-type">{{ type_icons.get(e.type, '📅') }} {{ e.type }}</span>{% endif %}
        {%- if e.notable %}<span class="calendar-event-badge">★ Major event</span>{% endif %}
        {%- if e.country %}<span class="calendar-event-country">{{ e.country | country_flag }} {{ e.country | country_name }}</span>{% endif %}
      </div>

      <div class="calendar-event-title">
        {%- if e.title_en -%}
          <div class="calendar-event-title-en">
            {%- if e.url %}<a href="{{ e.url }}" {% if e.source != 'blog' %}target="_blank" rel="noopener"{% endif %}>{{ e.title_en }}</a>{% else %}{{ e.title_en }}{% endif %}
          </div>
          <div class="calendar-event-title-orig">
            {%- if e.url %}<a href="{{ e.url }}" {% if e.source != 'blog' %}target="_blank" rel="noopener"{% endif %}>{{ e.title }}</a>{% else %}{{ e.title }}{% endif %}
          </div>
        {%- else -%}
          {%- if e.url %}<a href="{{ e.url }}" {% if e.source != 'blog' %}target="_blank" rel="noopener"{% endif %}>{{ e.title }}</a>{% else %}{{ e.title }}{% endif %}
        {%- endif %}
      </div>

      <div class="calendar-event-details">
        {%- if e.time %}
        <span class="calendar-event-time">{{ e.time }}{%- if e.end_time %}&thinsp;–&thinsp;{{ e.end_time }}{% endif %}</span>
        {%- endif %}
        {%- if e.location %}
        <span class="calendar-event-location">📍 {{ e.location }}</span>
        {%- endif %}
      </div>

      <div class="calendar-event-orgline">
        {%- if e.logo %}<img class="calendar-event-logo" src="{{ e.logo }}" alt="{{ e.org_title }} logo" loading="lazy">{% endif %}
        {%- if e.org_slug %}<a href="/organisations/{{ e.org_slug }}/">{{ e.org_title }}</a>
        {%- elif e.org_title %}{{ e.org_title }}{% endif %}
        {%- if e.coverage_url %}<a class="calendar-event-coverage" href="{{ e.coverage_url }}">DOD coverage →</a>{% endif %}
        {%- if e.url and e.url.startswith('http') %}
        <a class="calendar-event-action" href="{{ e.url }}" target="_blank" rel="noopener">{{ 'RSVP →' if 'humanitix' in e.url or 'eventbrite' in e.url or 'lu.ma' in e.url or 'ticket' in e.url else 'More info →' }}</a>
        {%- endif %}
      </div>
    </div>

  </li>
  {%- endfor %}
</ul>
{%- endfor %}
{%- endif %}

</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="application/ld+json">
[
{%- for e in calendar_events %}
  {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "{{ e.title | replace('"', '\"') }}",
    "startDate": "{{ e.date }}",
    {%- if e.end_date %}"endDate": "{{ (e.end_date.isoformat() if e.end_date is mapping else e.end_date) }}",{% endif %}
    {%- if e.url %}"url": "{{ e.url }}",{% endif %}
    {%- if e.location %}"location": {"@type": "Place", "name": "{{ e.location | replace('"', '\"') }}", "address": {"@type": "PostalAddress", "addressCountry": "{{ e.country or '' }}"}},{% endif %}
    "organizer": {"@type": "Organization", "name": "{{ e.org_title | replace('"', '\"') }}"},
    "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
    "eventStatus": "https://schema.org/EventScheduled"
  }{% if not loop.last %},{% endif %}
{%- endfor %}
]
</script>
<script>
(function () {
  var filter = document.getElementById('calendar-country-filter');
  var events = document.querySelectorAll('.calendar-event');
  var headings = document.querySelectorAll('.calendar-month-heading');
  var countEl = document.getElementById('calendar-filter-count');

  var countryMap = {};
  events.forEach(function (el) {
    var code = el.getAttribute('data-country');
    var label = el.getAttribute('data-country-label');
    if (code && label) countryMap[code] = label;
  });

  Object.entries(countryMap).sort(function (a, b) {
    return a[1].localeCompare(b[1]);
  }).forEach(function (pair) {
    var opt = document.createElement('option');
    opt.value = pair[0];
    opt.textContent = pair[1];
    filter.appendChild(opt);
  });

  // This is a static site — the page you're reading may have been built
  // days ago, so an event that was genuinely upcoming at build time can
  // have already happened by the time it's viewed. hooks/calendar_export.py
  // only filters by date at *build* time, so that drift is expected, not a
  // bug: this client-side pass corrects for it using the viewer's own
  // clock, which is always current regardless of when the page was built.
  // Collapsing past events (rather than just fading them in place) is what
  // actually keeps the still-relevant events on top without a full
  // re-layout, and highlighting today/tomorrow draws the eye to what's
  // most actionable right now.
  function collapsePastAndHighlightNear() {
    function parseLocalDate(s) {
      // new Date("YYYY-MM-DD") parses as UTC midnight, which reads as the
      // *previous* day for anyone west of UTC — a real off-by-one for a
      // "was this today" comparison. Parse the components and construct a
      // local-midnight Date instead.
      var parts = s.split('-');
      return new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
    }

    var now = new Date();
    var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    var tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);
    var weekOut = new Date(today);
    weekOut.setDate(weekOut.getDate() + 7);

    var pastEvents = [];

    events.forEach(function (el) {
      var dateStr = el.getAttribute('data-date');
      if (!dateStr) return;
      var eventDate = parseLocalDate(dateStr);
      var header = el.querySelector('.calendar-event-header');

      if (eventDate < today) {
        pastEvents.push(el);
      } else if (header && eventDate.getTime() === today.getTime()) {
        el.classList.add('calendar-event--today');
        var badge = document.createElement('span');
        badge.className = 'calendar-event-badge calendar-event-badge--today';
        badge.textContent = 'Today';
        header.insertBefore(badge, header.firstChild);
      } else if (header && eventDate.getTime() === tomorrow.getTime()) {
        el.classList.add('calendar-event--tomorrow');
        var badge2 = document.createElement('span');
        badge2.className = 'calendar-event-badge calendar-event-badge--tomorrow';
        badge2.textContent = 'Tomorrow';
        header.insertBefore(badge2, header.firstChild);
      } else if (header && eventDate > tomorrow && eventDate <= weekOut) {
        // A lighter-weight third tier: a plain badge only, deliberately
        // without today/tomorrow's colored border+background — highlighting
        // every event in the next week that strongly would drown out the
        // "this one is truly imminent" signal today/tomorrow are meant to
        // give, especially on a calendar aggregating many orgs' events.
        var badge3 = document.createElement('span');
        badge3.className = 'calendar-event-badge calendar-event-badge--week';
        badge3.textContent = 'This week';
        header.insertBefore(badge3, header.firstChild);
      }
    });

    if (pastEvents.length === 0) return;

    var slot = document.getElementById('calendar-past-events-slot');
    var details = document.createElement('details');
    details.className = 'calendar-past-events-details';
    var summary = document.createElement('summary');
    summary.textContent = pastEvents.length + ' event' + (pastEvents.length !== 1 ? 's' : '') +
      ' already passed since this page was last built — click to show';
    var list = document.createElement('ul');
    list.className = 'calendar-event-list';
    details.appendChild(summary);
    details.appendChild(list);
    pastEvents.forEach(function (el) {
      el.classList.add('calendar-event--past');
      list.appendChild(el);
    });
    slot.appendChild(details);
  }

  function updateCount() {
    var visible = 0;
    events.forEach(function (el) {
      // Past events living inside the collapsed "already passed" details
      // aren't part of "what's coming up" — excluded from the headline
      // count even while that details is open and they're technically
      // style.display !== 'none'.
      if (el.style.display !== 'none' && !el.closest('.calendar-past-events-details')) visible++;
    });
    countEl.textContent = visible + ' event' + (visible !== 1 ? 's' : '');
  }

  function applyFilter() {
    var selected = filter.value;
    events.forEach(function (el) {
      var c = el.getAttribute('data-country');
      if (selected === 'all' || c === selected) {
        el.style.display = '';
      } else {
        el.style.display = 'none';
      }
    });

    headings.forEach(function (h) {
      var list = h.nextElementSibling;
      if (!list || list.tagName !== 'UL') return;
      var visible = Array.from(list.children).some(function (li) {
        return li.style.display !== 'none';
      });
      h.style.display = visible ? '' : 'none';
    });

    document.getElementById('calendar-country-reset').classList.toggle('visible', filter.value !== 'all');
    updateCount();
    updateSubscribeLink();
  }

  // webcal:// is the scheme Apple Calendar and Outlook register to
  // subscribe (live, auto-refreshing) rather than one-time-import a plain
  // https:// .ics link, which most OSes just download. Google Calendar's
  // equivalent is its "Add by URL" screen, keyed off a ?cid= query param.
  // Both need an *absolute* URL, built from the real page origin rather
  // than mkdocs.yml's site_url (which is http://, not https://, and isn't
  // guaranteed to match wherever this actually ends up deployed).
  function appleUrl(path) {
    return (window.location.origin + path).replace(/^https?:\/\//, 'webcal://');
  }
  function googleUrl(path) {
    return 'https://calendar.google.com/calendar/render?cid=' + encodeURIComponent(window.location.origin + path);
  }

  // Google Calendar (and most other clients) don't offer any way to
  // filter a subscribed .ics feed after the fact — subscribing is
  // all-or-nothing. A per-country feed is generated at build time for
  // every country that appears in the dropdown above (see
  // hooks/calendar_export.py), so swap the Subscribe link's target to
  // match whichever country is currently selected, rather than always
  // pointing at the combined everything-feed.
  function updateSubscribeLink() {
    var link = document.getElementById('calendar-subscribe-link');
    var appleLink = document.getElementById('calendar-subscribe-apple');
    var googleLink = document.getElementById('calendar-subscribe-google');
    var hint = document.getElementById('calendar-subscribe-hint');
    var selected = filter.value;
    var path = selected === 'all' ? '/calendar.ics' : '/calendar-' + selected + '.ics';

    link.href = path;
    appleLink.href = appleUrl(path);
    googleLink.href = googleUrl(path);

    if (selected === 'all') {
      link.textContent = '📅 Subscribe (.ics)';
      hint.textContent = 'Add this URL to Google Calendar, Outlook, or Apple Calendar to get every event below automatically.';
    } else {
      var label = countryMap[selected] || selected;
      var flag = label.split(' ')[0];
      link.textContent = flag + ' Subscribe (.ics)';
      hint.textContent = 'Subscribes to ' + label + ' events only. Reset the filter above for every country instead.';
    }
  }

  // The "All iCal feeds" table's rows are static (not affected by the
  // country filter), so this only needs to run once at load.
  function populateFeedsTable() {
    document.querySelectorAll('.calendar-feeds-table tr[data-ics-path]').forEach(function (row) {
      var path = row.getAttribute('data-ics-path');
      var apple = row.querySelector('.calendar-feed-apple-link');
      var google = row.querySelector('.calendar-feed-google-link');
      if (apple) apple.href = appleUrl(path);
      if (google) google.href = googleUrl(path);
    });
  }

  filter.addEventListener('change', function() {
    var url = new URL(window.location);
    if (filter.value === 'all') {
      url.searchParams.delete('country');
    } else {
      url.searchParams.set('country', filter.value);
    }
    window.history.replaceState({}, '', url);
    applyFilter();
  });

  document.getElementById('calendar-country-reset').addEventListener('click', function() {
    filter.value = 'all';
    var url = new URL(window.location);
    url.searchParams.delete('country');
    window.history.replaceState({}, '', url);
    applyFilter();
  });

  // Must run before applyFilter(): moves past events out of their month
  // <ul>s so the empty-heading check inside applyFilter() sees the
  // post-collapse DOM, not the original build-time list.
  collapsePastAndHighlightNear();

  // Pre-select from ?country= query param
  var params = new URLSearchParams(window.location.search);
  var initial = params.get('country');
  if (initial && countryMap[initial.toUpperCase()]) {
    filter.value = initial.toUpperCase();
  }
  applyFilter();
  populateFeedsTable();
})();
</script>
{% endblock %}