{{ define "main" }}
  <section class="page-solutions">
    <h1 class="page-title">{{ .Params.headline }}</h1>

    {{ $iconChevron := resources.Get "images/picto/chevron_forward_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.svg" }}
    {{ $iconClose := resources.Get "images/picto/close_34dp_1F1F1F_FILL0_wght400_GRAD0_opsz40.svg" }}

    <div class="solutions-grid">
      {{ range sort (.Resources.Match "*.md") "Params.weight" }}
        <div class="solution-card">
          <div class="solution-front">
            <div class="solution-header">
              <h3 class="solution-title">{{ .Title }}</h3>
            </div>
            <div class="solution-image-container">
              {{ if .Params.image }}
                {{ $img := resources.Get .Params.image }}
                {{ if $img }}
                  <img src="{{ $img.RelPermalink }}" alt="{{ .Title }}" class="solution-image" />
                {{ end }}
              {{ end }}
              <div class="solution-toggle" aria-label="Voir le détail">
                {{ if $iconChevron }}<img src="{{ $iconChevron.RelPermalink }}" alt="" />{{ end }}
              </div>
            </div>
          </div>
          <div class="solution-back">
            <div class="solution-close" aria-label="Fermer">
              {{ if $iconClose }}<img src="{{ $iconClose.RelPermalink }}" alt="" />{{ end }}
            </div>
            <div class="solution-content">
              <p class="solution-text">{{ .Content | plainify }}</p>
            </div>
          </div>
        </div>
      {{ end }}
    </div>

    <div class="solutions-cta">
      {{ $iconSearch := resources.Get "images/picto/search_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
      <a href="/" class="solutions-btn">
        {{ if $iconSearch }}<img src="{{ $iconSearch.RelPermalink }}" alt="" class="btn-icon" />{{ end }}
        Rechercher un trajet
      </a>
    </div>
  </section>
{{ end }}