From 645574822d2ce24b58342cb653d56435aefe6af0 Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Thu, 9 Apr 2026 07:39:10 +0300
Subject: [PATCH] add sortable country table to global overview (EN/DE/FR)

Sorted by country name by default. Clickable headers to sort by
law, age, status, or year. All 20 countries from countries.json.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ...chutzgesetze-2026-weltweiter-ueberblick.md |   2 +
 ...ld-protection-laws-2026-global-overview.md |   2 +
 ...rotection-enfance-2026-panorama-mondial.md |   2 +
 layouts/shortcodes/country-table.html         | 116 ++++++++++++++++++
 4 files changed, 122 insertions(+)
 create mode 100644 layouts/shortcodes/country-table.html

diff --git a/content/de/kinderschutzgesetze-2026-weltweiter-ueberblick.md b/content/de/kinderschutzgesetze-2026-weltweiter-ueberblick.md
index 3a3fd83..e128360 100644
--- a/content/de/kinderschutzgesetze-2026-weltweiter-ueberblick.md
+++ b/content/de/kinderschutzgesetze-2026-weltweiter-ueberblick.md
@@ -15,6 +15,8 @@ Hier erfahren Sie, was Sie über die wichtigsten Kinderschutzgesetze wissen müs
 
 {{< stats-banner >}}
 
+{{< country-table >}}
+
 {{< world-map >}}
 
 
diff --git a/content/en/child-protection-laws-2026-global-overview.md b/content/en/child-protection-laws-2026-global-overview.md
index 5dadf95..23ed6ed 100644
--- a/content/en/child-protection-laws-2026-global-overview.md
+++ b/content/en/child-protection-laws-2026-global-overview.md
@@ -15,6 +15,8 @@ Here is what you need to know about the most important child protection laws tak
 
 {{< stats-banner >}}
 
+{{< country-table >}}
+
 {{< world-map >}}
 
 
diff --git a/content/fr/lois-protection-enfance-2026-panorama-mondial.md b/content/fr/lois-protection-enfance-2026-panorama-mondial.md
index fc07209..0191598 100644
--- a/content/fr/lois-protection-enfance-2026-panorama-mondial.md
+++ b/content/fr/lois-protection-enfance-2026-panorama-mondial.md
@@ -15,6 +15,8 @@ Voici ce que vous devez savoir sur les lois de protection de l'enfance les plus
 
 {{< stats-banner >}}
 
+{{< country-table >}}
+
 {{< world-map >}}
 
 
diff --git a/layouts/shortcodes/country-table.html b/layouts/shortcodes/country-table.html
new file mode 100644
index 0000000..1b88266
--- /dev/null
+++ b/layouts/shortcodes/country-table.html
@@ -0,0 +1,116 @@
+{{ $lang := .Page.Language.Lang }}
+{{ $countries := hugo.Data.countries }}
+
+<style>
+.ifk-table-wrap { margin: 2rem 0; overflow-x: auto; }
+.ifk-table-wrap h3 { text-align: center; margin-bottom: 1rem; font-size: 1.25rem; }
+.ifk-table {
+  width: 100%; border-collapse: collapse; font-size: 0.9rem;
+  background: #fff; border-radius: 8px; overflow: hidden;
+  border: 1px solid #e2e8f0;
+}
+.ifk-table thead { background: #f8fafc; }
+.ifk-table th {
+  padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: #334155;
+  border-bottom: 2px solid #e2e8f0; cursor: pointer; user-select: none;
+  white-space: nowrap; position: relative;
+}
+.ifk-table th:hover { background: #f1f5f9; }
+.ifk-table th .sort-arrow { margin-left: 0.35rem; font-size: 0.7rem; color: #94a3b8; }
+.ifk-table th.sorted-asc .sort-arrow::after { content: '\25B2'; color: #667eea; }
+.ifk-table th.sorted-desc .sort-arrow::after { content: '\25BC'; color: #667eea; }
+.ifk-table th:not(.sorted-asc):not(.sorted-desc) .sort-arrow::after { content: '\25B4\25BE'; }
+.ifk-table td { padding: 0.6rem 1rem; border-bottom: 1px solid #f1f5f9; }
+.ifk-table tbody tr:hover { background: #fafbfc; }
+.ifk-status-badge {
+  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px;
+  font-size: 0.78rem; font-weight: 600; color: #fff;
+}
+@media (max-width: 640px) {
+  .ifk-table { font-size: 0.8rem; }
+  .ifk-table th, .ifk-table td { padding: 0.5rem 0.6rem; }
+}
+</style>
+
+<div class="ifk-table-wrap">
+  <h3>{{ if eq $lang "de" }}Kinderschutzgesetze nach Land{{ else if eq $lang "fr" }}Lois de protection par pays{{ else }}Child Protection Laws by Country{{ end }}</h3>
+  <table class="ifk-table" id="ifk-country-table">
+    <thead>
+      <tr>
+        <th data-col="name" class="sorted-asc">{{ if eq $lang "de" }}Land{{ else if eq $lang "fr" }}Pays{{ else }}Country{{ end }}<span class="sort-arrow"></span></th>
+        <th data-col="law">{{ if eq $lang "de" }}Gesetz{{ else if eq $lang "fr" }}Loi{{ else }}Law{{ end }}<span class="sort-arrow"></span></th>
+        <th data-col="age">{{ if eq $lang "de" }}Mindestalter{{ else if eq $lang "fr" }}Âge min.{{ else }}Min. Age{{ end }}<span class="sort-arrow"></span></th>
+        <th data-col="status">{{ if eq $lang "de" }}Status{{ else if eq $lang "fr" }}Statut{{ else }}Status{{ end }}<span class="sort-arrow"></span></th>
+        <th data-col="year">{{ if eq $lang "de" }}Jahr{{ else if eq $lang "fr" }}Année{{ else }}Year{{ end }}<span class="sort-arrow"></span></th>
+      </tr>
+    </thead>
+    <tbody>
+    {{ range $countries }}
+      {{ $loc := index . $lang | default .en }}
+      <tr data-name="{{ $loc.name }}" data-law="{{ $loc.law }}" data-age="{{ .ageLimitSocial }}" data-status="{{ .status }}" data-year="{{ .year }}">
+        <td>{{ .flag }} {{ $loc.name }}</td>
+        <td>{{ $loc.law }}</td>
+        <td>{{ .ageLimitSocial }}+</td>
+        <td>
+          {{ $color := "#667eea" }}
+          {{ if eq .status "enforced" }}{{ $color = "#764ba2" }}
+          {{ else if eq .status "passed" }}{{ $color = "#4a5ec7" }}
+          {{ else if eq .status "progress" }}{{ $color = "#8b9cf0" }}
+          {{ else if eq .status "guidelines" }}{{ $color = "#c5cefd" }}{{ end }}
+          <span class="ifk-status-badge" style="background:{{ $color }}">
+            {{ if eq $lang "de" }}{{ if eq .status "enforced" }}In Kraft{{ else if eq .status "passed" }}Verabschiedet{{ else if eq .status "progress" }}In Bearbeitung{{ else }}Richtlinien{{ end }}
+            {{ else if eq $lang "fr" }}{{ if eq .status "enforced" }}En vigueur{{ else if eq .status "passed" }}Adopté{{ else if eq .status "progress" }}En cours{{ else }}Directives{{ end }}
+            {{ else }}{{ if eq .status "enforced" }}Enforced{{ else if eq .status "passed" }}Passed{{ else if eq .status "progress" }}In Progress{{ else }}Guidelines{{ end }}
+            {{ end }}
+          </span>
+        </td>
+        <td>{{ .year }}</td>
+      </tr>
+    {{ end }}
+    </tbody>
+  </table>
+</div>
+
+<script>
+(function() {
+  var table = document.getElementById('ifk-country-table');
+  if (!table) return;
+  var headers = table.querySelectorAll('th');
+  var tbody = table.querySelector('tbody');
+  var statusOrder = { enforced: 0, passed: 1, progress: 2, guidelines: 3 };
+
+  function sortTable(col, dir) {
+    var rows = Array.from(tbody.querySelectorAll('tr'));
+    rows.sort(function(a, b) {
+      var av = a.getAttribute('data-' + col);
+      var bv = b.getAttribute('data-' + col);
+      if (col === 'age' || col === 'year') {
+        av = parseInt(av); bv = parseInt(bv);
+      } else if (col === 'status') {
+        av = statusOrder[av] !== undefined ? statusOrder[av] : 99;
+        bv = statusOrder[bv] !== undefined ? statusOrder[bv] : 99;
+      } else {
+        av = av.toLowerCase(); bv = bv.toLowerCase();
+      }
+      if (av < bv) return dir === 'asc' ? -1 : 1;
+      if (av > bv) return dir === 'asc' ? 1 : -1;
+      return 0;
+    });
+    rows.forEach(function(r) { tbody.appendChild(r); });
+  }
+
+  headers.forEach(function(th) {
+    th.addEventListener('click', function() {
+      var col = th.getAttribute('data-col');
+      var wasAsc = th.classList.contains('sorted-asc');
+      headers.forEach(function(h) { h.classList.remove('sorted-asc', 'sorted-desc'); });
+      var dir = wasAsc ? 'desc' : 'asc';
+      th.classList.add('sorted-' + dir);
+      sortTable(col, dir);
+    });
+  });
+
+  // Initial sort by country name ascending
+  sortTable('name', 'asc');
+})();
+</script>