{{ define "main" }}
{{ partial "breadcrumbs.html" . }}

<article class="site-container section">
  <header class="mb-8 max-w-3xl">
    <h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">{{ .Params.h1 | default .Title }}</h1>
    {{ with .Params.description }}<p class="mt-3 text-lg text-secondary/70">{{ . }}</p>{{ end }}
    {{ if not .Lastmod.IsZero }}<p class="mt-2 text-xs text-secondary/70">Last updated {{ .Lastmod.Format "2 January 2006" }}</p>{{ end }}
  </header>

  {{ with .Content }}<div class="prose-content max-w-3xl">{{ . }}</div>{{ end }}

  {{ if or .Params.pros .Params.cons }}
    <section class="mt-12 max-w-3xl">
      <h2 class="mb-4 text-2xl font-bold">Pros &amp; cons at a glance</h2>
      {{ partial "pros-cons-table.html" . }}
    </section>
  {{ end }}

  {{ if .Params.showRatingWidget }}
    <section class="mt-12 max-w-3xl">
      <h2 class="mb-4 text-2xl font-bold">Our verdict</h2>
      {{ partial "rating-widget.html" . }}
    </section>
  {{ end }}

  {{ if .Params.showKycByLocale }}
    <section class="mt-12 max-w-4xl">
      <h2 class="mb-3 text-2xl font-bold">Verification documents by region</h2>
      <p class="mb-4 text-secondary/70">KYC requirements vary by market. Choose your region in the header to highlight your row; the full list is below.</p>
      <div class="overflow-x-auto">
        <table class="data-table">
          <thead><tr><th scope="col">Region</th><th scope="col">Required documents (KYC)</th></tr></thead>
          <tbody>
            {{- range .Site.Data.locales -}}
              <tr data-kyc-row data-locale="{{ .locale }}">
                <th scope="row" class="font-medium">{{ .label | default .locale }}</th>
                <td><ul class="list-disc space-y-1 pl-4">{{ range .requiredKycDocs }}<li>{{ . }}</li>{{ end }}</ul></td>
              </tr>
            {{- end -}}
          </tbody>
        </table>
      </div>
    </section>
  {{ end }}

  {{ if .Params.showFaqAccordion }}
    <section class="mt-12">
      <h2 class="mb-6 text-2xl font-bold">Frequently asked questions</h2>
      {{ partial "faq-accordion.html" . }}
    </section>
  {{ end }}

  {{ if .Params.responsibleGamblingSection }}
    <section class="mt-12">
      {{ partial "responsible-gambling-block.html" (dict "page" . "variant" "full") }}
    </section>
  {{ end }}

  {{ if not .Params.hideCta }}
    <div class="mt-12 max-w-3xl rounded-2xl border border-primary/20 bg-primary/5 p-6">
      <h2 class="text-xl font-bold">Ready to get started?</h2>
      <p class="mt-1 text-secondary/70"><span data-age-value>{{ .Site.Data.brand.ageRestrictionDefault }}</span>+ only. T&amp;Cs apply. Please gamble responsibly.</p>
      <div class="mt-4">{{ partial "cta-button.html" (dict "page" . "text" "Visit Casino" "size" "lg") }}</div>
    </div>
  {{ end }}
</article>

{{ partial "related-pages.html" . }}
{{ end }}