<section id="certifications">
  <div class="container">
    <div class="section-eyebrow reveal">{{ i18n "section_certs" }}</div>
    <h2 class="section-title reveal">{{ i18n "certs_title" }}</h2>

    {{ $lang := .Site.Language.Lang }}
    {{ $count := len hugo.Data.certs }}
    {{ $wide := gt $count 3 }}

    <div class="carousel-wrap" data-carousel>
    <div class="cert-grid is-carousel{{ if $wide }} is-wide-carousel{{ end }}">
      {{ range hugo.Data.certs }}
      {{ $ph := .placeholder }}
      {{ $ip := index . "in_progress" }}
      <div class="cert-card{{ if $ph }} placeholder{{ end }} reveal">
        {{ if $ip }}<span class="cert-wip">{{ i18n "cert_in_progress" }}</span>{{ end }}
        {{ with .date }}<span class="cert-date">{{ . }}</span>{{ end }}
        {{ $img := index . "image" }}
        {{ if and $img (not $ph) }}
        <div class="cert-badge cert-badge--img">
          <img src="{{ $img }}" alt="{{ .name }}">
        </div>
        {{ else }}
        <div class="cert-badge cert-badge--placeholder"><i class="{{ .badge }}"></i></div>
        {{ end }}

        <div class="cert-name"{{ if $ph }} style="color:var(--muted)"{{ end }}>
          {{ if .name }}{{ .name }}{{ else if eq $lang "it" }}{{ .name_it }}{{ else }}{{ .name_en }}{{ end }}
        </div>

        <div class="cert-issuer"{{ if $ph }} style="color:var(--muted)"{{ end }}>
          {{ if .issuer }}{{ .issuer }}{{ else if eq $lang "it" }}{{ .issuer_it }}{{ else }}{{ .issuer_en }}{{ end }}
        </div>

        <p class="cert-desc">{{ if eq $lang "it" }}{{ .desc_it }}{{ else }}{{ .desc_en }}{{ end }}</p>

        {{ if not $ph }}
        <div class="cert-meta">
          <div class="cert-meta-item">
            <span class="cert-meta-label">{{ i18n "cert_issuer_label" }}</span>
            <span class="cert-meta-val">{{ .issuer_val }}</span>
          </div>
          <div class="cert-meta-item">
            <span class="cert-meta-label">{{ i18n "cert_level_label" }}</span>
            <span class="cert-meta-val">{{ if eq $lang "it" }}{{ .level_it }}{{ else }}{{ .level_en }}{{ end }}</span>
          </div>
          <div class="cert-meta-item">
            <span class="cert-meta-label">{{ i18n "cert_type_label" }}</span>
            <span class="cert-meta-val">{{ if eq $lang "it" }}{{ .type_it }}{{ else }}{{ .type_en }}{{ end }}</span>
          </div>
        </div>
        {{ end }}
      </div>
      {{ end }}
    </div>
    <div class="carousel-controls">
      <button class="carousel-btn carousel-btn--prev" aria-label="{{ i18n "carousel_prev" }}">
        <i class="fa-solid fa-chevron-left"></i>
      </button>
      <div class="carousel-dots"></div>
      <button class="carousel-btn carousel-btn--next" aria-label="{{ i18n "carousel_next" }}">
        <i class="fa-solid fa-chevron-right"></i>
      </button>
    </div>
    </div>{{/* end carousel-wrap */}}
  </div>
</section>
