{% extends "main.html" %}
{% set type_icons = {
  'research': '🔬', 'education': '🔬',
  'advocacy': '📢',
  'platform': '💻', 'civic tech': '💻',
  'practice': '🤝', 'philanthropy': '🤝', 'cooperative': '🤝',
  'party': '🗳️', 'movement': '🗳️',
  'governance': '⚖️', 'government': '⚖️',
  'media': '📺'
} %}
{% block styles %}
{{ super() }}
<style>
  /* Wide layout for the Democracy Landscape page only.
     This page has no headings, so the secondary sidebar (table of
     contents) is always empty — drop it and give that space to the
     facet panel + table instead. */
  .md-main__inner.md-grid { max-width: 1800px; }
  .md-sidebar--secondary  { display: none !important; }
  .md-content             { max-width: 100% !important; }
</style>
{% endblock %}
{% block content %}
{{ super() }}
<div class="md-typeset">

<div class="org-toolbar">
  <input type="search" id="org-search" placeholder="Search organisations…" class="org-search-input" aria-label="Search organisations">

  <div class="org-facet-bar" aria-label="Filter organisations">
    <details class="org-facet-dd" data-facet="status">
      <summary>Status <span class="org-facet-badge" data-facet-badge="status"></span></summary>
      <div class="org-facet-panel" data-facet-list="status"></div>
    </details>

    <details class="org-facet-dd" data-facet="type">
      <summary>Type <span class="org-facet-badge" data-facet-badge="type"></span></summary>
      <div class="org-facet-panel org-facet-panel--scroll" data-facet-list="type"></div>
    </details>

    <details class="org-facet-dd" data-facet="country">
      <summary>Country <span class="org-facet-badge" data-facet-badge="country"></span></summary>
      <div class="org-facet-panel org-facet-panel--scroll" data-facet-list="country"></div>
    </details>

    <details class="org-facet-dd" data-facet="concepts">
      <summary>Concepts <span class="org-facet-badge" data-facet-badge="concepts"></span></summary>
      <div class="org-facet-panel org-facet-panel--scroll" data-facet-list="concepts"></div>
    </details>
  </div>

  <div class="org-activity-filters" role="group" aria-label="Filter by recency">
    <button class="org-activity-btn active" data-days="0">All time</button>
    <button class="org-activity-btn" data-days="180">6 months</button>
    <button class="org-activity-btn" data-days="365">1 year</button>
    <button class="org-activity-btn" data-days="730">2 years</button>
  </div>

  <button type="button" id="org-clear-filters" class="org-clear-btn">Clear filters</button>
</div>

  <div class="org-results">
    <div class="org-table-scroll">
    <table id="org-table" class="org-sortable-table">
      <thead>
        <tr>
          <th class="sortable" data-col="0">Name <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="1">Type <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="2">Country <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="3">Status <span class="sort-icon">↕</span></th>
          <th class="sortable" data-col="4">Last active <span class="sort-icon">↕</span></th>
          <th>Contact</th>
          <th>Concepts</th>
        </tr>
      </thead>
      <tbody>
        {%- for file in pages %}
          {%- if file.page and file.page.url and file.page.url.startswith('organisations/') and file.page.url != page.url %}
          {%- set country = file.page.meta.get('country', '') %}
          {%- set org_type = file.page.meta.get('type', '') %}
          {%- set website = file.page.meta.get('website', '') %}
          {%- set contact = file.page.meta.get('contact', {}) or {} %}
          {%- set concepts = file.page.meta.get('concepts', []) or [] %}
          {%- set slug = file.page.file.src_path | replace('organisations/', '') | replace('.md', '') %}
          {%- set ca = org_activity_cache.get(slug) %}
          {%- set ca_date = (ca.date | string) if ca else '' %}
          {%- set ca_method = ca.method if ca else '' %}
          <tr data-status="{{ file.page.meta.get('status', '') }}"
              data-country="{{ country }}"
              data-type="{{ org_type }}"
              data-concepts="{{ concepts | join(',') }}"
              data-activity="{{ ca_date }}"
              data-activity-method="{{ ca_method }}"
              data-name="{{ file.page.title }}"
              data-website="{{ website }}"
              data-email="{{ contact.get('email', '') }}"
              data-phone="{{ contact.get('phone', '') }}"
              data-form="{{ contact.get('form', '') }}">
            <td>
              {%- if file.page.meta.get('logo') %}
               <img src="{{ file.page.meta.logo }}" alt="" class="org-row-logo{% if file.page.meta.get('logo_bg') == 'dark' %} org-logo-needs-dark{% elif file.page.meta.get('logo_bg') == 'light' %} org-logo-needs-light{% endif %}" loading="lazy" decoding="async" width="40" height="40">
              {%- endif %}
              <a href="/{{ file.page.url }}">{{ file.page.title }}</a>
              {%- if website and not website.startswith('https://web.archive.org') %}
              <a href="{{ website }}" class="org-ext-link" target="_blank" rel="noopener" title="{{ website }}">↗</a>
              {%- endif %}
            </td>
            <td data-sort="{{ org_type }}">{{ type_icons.get(org_type, '🏛️') }} {{ org_type }}</td>
            <td data-sort="{{ country }}">{{ country }}</td>
            <td><span class="project-status-badge status-{{ file.page.meta.get('status', '') }}">{{ file.page.meta.get('status', '') }}</span></td>
            <td data-sort="{{ ca_date }}">
              {%- if ca_date %}
              {{ ca_date }}<span class="activity-method-chip method-{{ ca_method }}">{{ ca_method }}</span>
              {%- else %}—{%- endif %}
            </td>
            <td class="org-contact-cell">
              {%- if contact.get('email') %}<a href="mailto:{{ contact.get('email') }}" class="org-contact-line">{{ contact.get('email') }}</a>{%- endif %}
              {%- if contact.get('phone') %}<span class="org-contact-line">{{ contact.get('phone') }}</span>{%- endif %}
              {%- if contact.get('form') %}<a href="{{ contact.get('form') }}" class="org-contact-line" target="_blank" rel="noopener">Contact form ↗</a>{%- endif %}
              {%- for ch in contact.get('channels', []) or [] %}
              <a href="{{ ch.url }}" class="org-contact-line" target="_blank" rel="noopener">{{ ch.label or ch.type | capitalize }} ↗</a>
              {%- endfor %}
              {%- if not contact.get('email') and not contact.get('phone') and not contact.get('form') and not contact.get('channels') %}—{%- endif %}
            </td>
            <td>
              {%- for c in concepts %}
              <a href="/concepts/{{ c }}/" class="concept-tag">{{ c | replace('-', ' ') | title }}</a>
              {%- endfor %}
            </td>
          </tr>
          {%- endif %}
        {%- endfor %}
      </tbody>
    </table>
    </div>
    <div class="org-table-footer">
      <p id="org-count" class="org-count"></p>
      <p class="org-export-links">
        <button type="button" id="org-export-filtered" class="org-export-filtered-btn">Export filtered view (CSV)</button>
        &nbsp;·&nbsp; Download full dataset:
        <a href="/data/organisations.csv">CSV</a> ·
        <a href="/data/organisations.json">JSON</a> ·
        <a href="/data/organisations.geojson">GeoJSON</a>
      </p>
    </div>
  </div>

</div>
<script>
(function () {
  // Per-concept tag colours — hash the slug to a stable hue
  document.querySelectorAll('.concept-tag').forEach(function(el) {
    var parts = el.getAttribute('href').split('/');
    var slug = parts[parts.indexOf('concepts') + 1] || '';
    var hash = 0;
    for (var i = 0; i < slug.length; i++) hash = ((hash << 5) - hash) + slug.charCodeAt(i);
    el.style.setProperty('--concept-hue', Math.abs(hash) % 360);
  });

  function toFlag(code) {
    if (!code || code.length !== 2) return code;
    var base = 0x1F1E6 - 65;
    return String.fromCodePoint(code.toUpperCase().charCodeAt(0) + base) +
           String.fromCodePoint(code.toUpperCase().charCodeAt(1) + base);
  }
  var countryNames = {
    AR:'Argentina', AT:'Austria', AU:'Australia', BE:'Belgium',
    BO:'Bolivia', BR:'Brazil', CA:'Canada', CN:'China',
    CU:'Cuba', DE:'Germany', EC:'Ecuador', EE:'Estonia',
    ES:'Spain', EU:'European Union', FR:'France', GB:'United Kingdom',
    GH:'Ghana', IL:'Israel', IN:'India', IS:'Iceland',
    KE:'Kenya', LB:'Lebanon', MX:'Mexico', MY:'Malaysia',
    NG:'Nigeria', NZ:'New Zealand', PH:'Philippines', PS:'Palestine',
    RO:'Romania', RU:'Russia', RW:'Rwanda', SE:'Sweden',
    SK:'Slovakia', SY:'Syria', TW:'Taiwan', UA:'Ukraine',
    US:'United States', VE:'Venezuela', VN:'Vietnam', ZA:'South Africa'
  };
  function countryDisplay(code) {
    if (!code) return '';
    var name = countryNames[code.toUpperCase()] || code;
    return code.length === 2 ? toFlag(code) + ' ' + name : name;
  }
  function titleCase(s) {
    return s.replace(/-/g, ' ').replace(/\w\S*/g, function (t) {
      return t.charAt(0).toUpperCase() + t.substr(1);
    });
  }

  var table   = document.getElementById('org-table');
  var tbody   = table.querySelector('tbody');
  var headers = Array.from(table.querySelectorAll('th.sortable'));
  var search  = document.getElementById('org-search');
  var countEl = document.getElementById('org-count');
  var clearBtn = document.getElementById('org-clear-filters');
  var activityBtns = Array.from(document.querySelectorAll('.org-activity-btn'));
  var sortCol = -1, sortAsc = true;
  var activeDays = 0;

  function rows() { return Array.from(tbody.querySelectorAll('tr')); }

  // Replace country code text with emoji flag + full name in table cells
  rows().forEach(function (r) {
    var code = r.dataset.country;
    r.cells[2].textContent = countryDisplay(code);
  });

  function daysSince(dateStr) {
    if (!dateStr) return Infinity;
    var d = new Date(dateStr);
    return (Date.now() - d.getTime()) / 86400000;
  }

  // ── Faceted filters ──────────────────────────────────────────────────
  // Each facet reads its raw value(s) off a row via `get`, which returns
  // either a single string (type/country/status) or an array of strings
  // (concepts, which are multi-valued per row).
  var facets = [
    { key: 'type',     list: document.querySelector('[data-facet-list="type"]'),     get: function (r) { return r.dataset.type; },   checked: {}, display: function (v) { return v; } },
    { key: 'country',  list: document.querySelector('[data-facet-list="country"]'),  get: function (r) { return r.dataset.country; }, checked: {}, display: function (v) { return countryDisplay(v); } },
    { key: 'status',   list: document.querySelector('[data-facet-list="status"]'),   get: function (r) { return r.dataset.status; },  checked: { active: true }, display: function (v) { return titleCase(v); } },
    { key: 'concepts', list: document.querySelector('[data-facet-list="concepts"]'), get: function (r) { return r.dataset.concepts ? r.dataset.concepts.split(',').filter(Boolean) : []; }, checked: {}, display: function (v) { return titleCase(v); }, multiValued: true }
  ];

  function rowMatchesFacet(row, facet) {
    var checkedValues = Object.keys(facet.checked).filter(function (v) { return facet.checked[v]; });
    if (checkedValues.length === 0) return true; // nothing checked = no filter from this facet
    var val = facet.get(row);
    if (facet.multiValued) {
      return val.some(function (v) { return facet.checked[v]; });
    }
    return !!facet.checked[val];
  }

  function rowMatchesOtherFacets(row, excludeKey) {
    return facets.every(function (f) {
      if (f.key === excludeKey) return true;
      return rowMatchesFacet(row, f);
    });
  }

  function rowMatchesSearchAndActivity(row) {
    var q = search.value.toLowerCase();
    var textOk = !q || row.textContent.toLowerCase().includes(q);
    var activityOk = activeDays === 0 || daysSince(row.dataset.activity) <= activeDays;
    return textOk && activityOk;
  }

  function rowVisible(row) {
    return rowMatchesSearchAndActivity(row) && facets.every(function (f) { return rowMatchesFacet(row, f); });
  }

  function buildFacetOptionSet(facet) {
    var values = {};
    rows().forEach(function (r) {
      var v = facet.get(r);
      (facet.multiValued ? v : [v]).forEach(function (single) {
        if (single) values[single] = true;
      });
    });
    return Object.keys(values).sort();
  }

  function renderFacet(facet) {
    var options = buildFacetOptionSet(facet);
    facet.list.innerHTML = '';
    options.forEach(function (value) {
      var id = 'facet-' + facet.key + '-' + value.replace(/[^a-z0-9]+/gi, '-');
      var label = document.createElement('label');
      label.className = 'org-facet-option';
      label.setAttribute('for', id);
      var input = document.createElement('input');
      input.type = 'checkbox';
      input.id = id;
      input.value = value;
      input.checked = !!facet.checked[value];
      input.addEventListener('change', function () {
        facet.checked[value] = input.checked;
        applyFilters();
      });
      var span = document.createElement('span');
      span.className = 'org-facet-option-label';
      span.textContent = facet.display(value);
      var count = document.createElement('span');
      count.className = 'org-facet-count';
      count.dataset.facetKey = facet.key;
      count.dataset.facetValue = value;
      label.appendChild(input);
      label.appendChild(span);
      label.appendChild(count);
      facet.list.appendChild(label);
    });
  }

  function updateFacetCounts() {
    facets.forEach(function (facet) {
      var counts = {};
      rows().forEach(function (r) {
        if (!rowMatchesSearchAndActivity(r) || !rowMatchesOtherFacets(r, facet.key)) return;
        var v = facet.get(r);
        (facet.multiValued ? v : [v]).forEach(function (single) {
          if (!single) return;
          counts[single] = (counts[single] || 0) + 1;
        });
      });
      facet.list.querySelectorAll('.org-facet-count').forEach(function (el) {
        var n = counts[el.dataset.facetValue] || 0;
        el.textContent = '(' + n + ')';
        el.closest('.org-facet-option').classList.toggle('org-facet-option--empty', n === 0);
      });
    });
  }

  function updateFacetBadges() {
    facets.forEach(function (facet) {
      var n = Object.keys(facet.checked).filter(function (k) { return facet.checked[k]; }).length;
      var badge = document.querySelector('[data-facet-badge="' + facet.key + '"]');
      if (!badge) return;
      badge.textContent = n ? '(' + n + ')' : '';
      badge.closest('.org-facet-dd').classList.toggle('org-facet-dd--active', n > 0);
    });
  }

  function applyFilters() {
    var visible = 0;
    rows().forEach(function (r) {
      var show = rowVisible(r);
      r.hidden = !show;
      if (show) visible++;
    });
    countEl.textContent = visible + ' organisation' + (visible !== 1 ? 's' : '');
    updateFacetCounts();
    updateFacetBadges();
  }

  function applySort(col, asc) {
    var sorted = rows().sort(function (a, b) {
      var av = (a.cells[col].dataset.sort || a.cells[col].textContent).trim().toLowerCase();
      var bv = (b.cells[col].dataset.sort || b.cells[col].textContent).trim().toLowerCase();
      return asc ? av.localeCompare(bv) : bv.localeCompare(av);
    });
    sorted.forEach(function (r) { tbody.appendChild(r); });
  }

  headers.forEach(function (th) {
    th.addEventListener('click', function () {
      var col = parseInt(th.dataset.col, 10);
      sortAsc = (sortCol === col) ? !sortAsc : true;
      sortCol = col;
      headers.forEach(function (h) { h.querySelector('.sort-icon').textContent = '↕'; });
      th.querySelector('.sort-icon').textContent = sortAsc ? '↑' : '↓';
      applySort(col, sortAsc);
    });
    th.style.cursor = 'pointer';
  });

  search.addEventListener('input', applyFilters);

  activityBtns.forEach(function (btn) {
    btn.addEventListener('click', function () {
      activityBtns.forEach(function (b) { b.classList.remove('active'); });
      btn.classList.add('active');
      activeDays = parseInt(btn.dataset.days, 10);
      applyFilters();
    });
  });

  clearBtn.addEventListener('click', function () {
    search.value = '';
    activeDays = 0;
    activityBtns.forEach(function (b) { b.classList.toggle('active', b.dataset.days === '0'); });
    facets.forEach(function (f) {
      Object.keys(f.checked).forEach(function (k) { delete f.checked[k]; });
      if (f.key === 'status') f.checked.active = true;
      renderFacet(f);
    });
    applyFilters();
  });

  // ── Export filtered view as CSV ──────────────────────────────────────
  // The static /data/organisations.csv is generated at build time and
  // always covers every org; this instead snapshots whatever rows the
  // current search/facet/activity filters leave visible right now.
  function csvField(value) {
    var s = value == null ? '' : String(value);
    if (/[",\n]/.test(s)) s = '"' + s.replace(/"/g, '""') + '"';
    return s;
  }

  var exportBtn = document.getElementById('org-export-filtered');
  exportBtn.addEventListener('click', function () {
    var header = ['Name', 'Type', 'Country', 'Status', 'Last active', 'Last active method',
                   'Website', 'Contact email', 'Contact phone', 'Contact form', 'Concepts'];
    var lines = [header.map(csvField).join(',')];
    rows().forEach(function (r) {
      if (r.hidden) return;
      var d = r.dataset;
      var concepts = d.concepts ? d.concepts.split(',').filter(Boolean).join('; ') : '';
      lines.push([
        d.name, d.type, d.country, d.status, d.activity, d.activityMethod,
        d.website, d.email, d.phone, d.form, concepts
      ].map(csvField).join(','));
    });
    var blob = new Blob([lines.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'democracy-landscape-filtered.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

  // Dropdown facet panels: only one open at a time, and clicking outside closes them.
  var facetDropdowns = Array.from(document.querySelectorAll('.org-facet-dd'));
  facetDropdowns.forEach(function (dd) {
    dd.addEventListener('toggle', function () {
      if (dd.open) {
        facetDropdowns.forEach(function (other) { if (other !== dd) other.open = false; });
      }
    });
  });
  document.addEventListener('click', function (e) {
    if (!e.target.closest('.org-facet-dd')) {
      facetDropdowns.forEach(function (dd) { dd.open = false; });
    }
  });

  // Pre-set facet from URL query param (e.g. ?concept=direct-democracy)
  (function () {
    var params = new URLSearchParams(window.location.search);
    var conceptParam = params.get('concept');
    if (conceptParam) {
      var conceptFacet = facets.find(function (f) { return f.key === 'concepts'; });
      if (conceptFacet) conceptFacet.checked[conceptParam] = true;
    }
  })();

  facets.forEach(renderFacet);
  applyFilters();
})();
</script>
{% endblock %}