internetforkids/layouts/shortcodes/country-table.html

{{ $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>