{{ define "main" }}
  {{ $heroImage := .Params.heroImage | default "images/visuels/Conducteur-solidaire.png" }}
  {{ $heroBg := resources.Get $heroImage }}
  <section class="conducteur-hero" {{ if $heroBg }}style="background-image: url('{{ $heroBg.RelPermalink }}')"{{ end }}>
  </section>

  <section class="page-conducteur">
    <h1 class="page-title">{{ .Params.headline | default "Rejoignez la communauté des conducteurs solidaires !" }}</h1>

    <div class="conducteur-content">
      {{ $carImagePath := .Params.contentImage | default "images/visuels/covoiturage.svg" }}
      {{ $carImage := resources.Get $carImagePath }}
      {{ if $carImage }}
        <div class="conducteur-image">
          <img src="{{ $carImage.RelPermalink }}" alt="Covoiturage" />
        </div>
      {{ end }}
      <div class="conducteur-text">
        {{ .Content }}
      </div>
    </div>

    <div class="conducteur-etapes-section">
      {{ $allResources := .Resources.Match "*.md" }}
      {{ $etapes := where $allResources "Params.type" "!=" "page-footer" }}
      {{ $arrowGreen := resources.Get "images/picto/Picto - Conducteur solidaire - Fleche verte.svg" }}
      {{ $arrowOrange := resources.Get "images/picto/Picto - Conducteur solidaire - Fleche orange.svg" }}
      {{ if $etapes }}
        <div class="conducteur-etapes">
          <h2 class="etapes-title">{{ .Params.etapesTitle | default "Une démarche simple et pratique" }}</h2>
          <div class="etapes-list">
            {{ $sortedEtapes := sort $etapes "Params.weight" }}
            {{ $total := len $sortedEtapes }}
            {{ range $index, $etape := $sortedEtapes }}
              <div class="etape-block">
                {{ if $etape.Params.icon }}
                  {{ $icon := resources.Get $etape.Params.icon }}
                  {{ if $icon }}
                    <div class="etape-icon">
                      <img src="{{ $icon.RelPermalink }}" alt="" />
                    </div>
                  {{ end }}
                {{ end }}
                <div class="etape-content">
                  <h3 class="etape-title">{{ $etape.Title }}</h3>
                  <div class="etape-text">{{ $etape.Content }}</div>
                </div>
                {{ if lt (add $index 1) $total }}
                  {{ if eq (mod $index 2) 0 }}
                    <div class="etape-arrow etape-arrow-right">
                      <img src="{{ $arrowGreen.RelPermalink }}" alt="" />
                    </div>
                  {{ else }}
                    <div class="etape-arrow etape-arrow-left">
                      <img src="{{ $arrowOrange.RelPermalink }}" alt="" />
                    </div>
                  {{ end }}
                {{ end }}
              </div>
            {{ end }}
          </div>
        </div>
      {{ end }}

      <div class="plus-infos">
        {{ $downloadIcon := resources.Get "images/picto/Telechargez.svg" }}
        <h3 class="plus-infos-title">{{ .Params.plusInfosTitle | default "Plus d'infos ?" }}</h3>
        <p class="plus-infos-text">{{ .Params.plusInfosText | default "Vous avez des questions ? Vous souhaitez recevoir de la documentation imprimée ?" }}</p>
        <a href="{{ .Params.plusInfosContactLink | default "/pages/contact/" }}" class="plus-infos-button">Contactez-nous</a>
        {{ with .Params.depliantLink }}
        <a href="{{ . }}" class="plus-infos-download" target="_blank">
          {{ $downloadIcon := resources.Get "images/picto/download_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg" }}
          {{ if $downloadIcon }}
            <img src="{{ $downloadIcon.RelPermalink }}" alt="" />
          {{ end }}
          <span>Ou téléchargez le dépliant d'information</span>
        </a>
        {{ end }}
      </div>
    </div>

    <div class="conducteur-video">
      <div class="conducteur-video-container">
        {{ $videoPath := .Params.video | default "videos/capsule_covoiturage.mp4" }}
        {{ $video := resources.Get $videoPath }}
        {{ if $video }}
          <video controls>
            <source src="{{ $video.RelPermalink }}" type="video/mp4">
          </video>
        {{ end }}
      </div>
    </div>

    {{ $pageFooter := where $allResources "Params.type" "page-footer" }}
    {{ range $pageFooter }}
      <div class="page-footer-section">
        <h2 class="page-footer-title">{{ .Title }}</h2>
        <div class="page-footer-content">
          {{ .Content }}
        </div>
      </div>
    {{ end }}
  </section>
{{ end }}