{{ $lang := .Page.Language.Lang }}
{{ $countries := hugo.Data.countries }}

{{ $statusClass := dict "enforced" "csm-enforced" "passed" "csm-passed" "progress" "csm-progress" "guidelines" "csm-guidelines" }}
{{ $statusLabel := dict
  "enforced" (dict "en" "Enforced" "de" "In Kraft" "fr" "En vigueur")
  "passed" (dict "en" "Passed" "de" "Verabschiedet" "fr" "Adopté")
  "progress" (dict "en" "In Progress" "de" "In Bearbeitung" "fr" "En cours")
  "guidelines" (dict "en" "Guidelines" "de" "Richtlinien" "fr" "Directives")
}}

<style>
.csm-container { max-width: 100%; margin: 2rem 0; }
.csm-container h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
.csm-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
.csm-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.csm-table th { background: #667eea; color: white; padding: 0.75rem 1rem; text-align: left; font-weight: 600; }
.csm-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.csm-table tr:hover { background: #f0fdf4; }
.csm-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.csm-enforced { background: #667eea; color: white; }
.csm-passed { background: #764ba2; color: white; }
.csm-progress { background: #a5b4fc; color: #312e81; }
.csm-guidelines { background: #e0e7ff; color: #312e81; }
.csm-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; font-size: 0.8rem; }
.csm-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.csm-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
@media (max-width: 640px) { .csm-table { font-size: 0.85rem; } .csm-table th, .csm-table td { padding: 0.5rem; } }
</style>

<div class="csm-container">
  <h3>{{ if eq $lang "de" }}Kinderschutzgesetze weltweit{{ else if eq $lang "fr" }}Lois de protection de l'enfance dans le monde{{ else }}Child Protection Laws Worldwide{{ end }}</h3>
  <p class="csm-subtitle">{{ if eq $lang "de" }}Stand: 2026{{ else if eq $lang "fr" }}Situation en 2026{{ else }}As of 2026{{ end }}</p>

  <table class="csm-table">
    <thead>
      <tr>
        <th>{{ if eq $lang "de" }}Land{{ else if eq $lang "fr" }}Pays{{ else }}Country{{ end }}</th>
        <th>{{ if eq $lang "de" }}Gesetz{{ else if eq $lang "fr" }}Loi{{ else }}Law{{ end }}</th>
        <th>Status</th>
        <th>{{ if eq $lang "de" }}Details{{ else if eq $lang "fr" }}Détails{{ else }}Details{{ end }}</th>
      </tr>
    </thead>
    <tbody>
      {{ range $countries }}
        {{ $loc := index . $lang | default (index . "en") }}
        {{ $cls := index $statusClass .status }}
        {{ $lbl := index (index $statusLabel .status) $lang | default (index (index $statusLabel .status) "en") }}
        <tr>
          <td>{{ .flag }} {{ $loc.name }}</td>
          <td>{{ $loc.law }}</td>
          <td><span class="csm-status {{ $cls }}">{{ $lbl }}</span></td>
          <td>{{ $loc.detail }}</td>
        </tr>
      {{ end }}
    </tbody>
  </table>

  <div class="csm-legend">
    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#667eea"></div>{{ if eq $lang "de" }}Gesetz in Kraft{{ else if eq $lang "fr" }}Loi en vigueur{{ else }}Law Enforced{{ end }}</div>
    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#764ba2"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#a5b4fc"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
    <div class="csm-legend-item"><div class="csm-legend-swatch" style="background:#e0e7ff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
  </div>
</div>