{% extends 'base.twig' %}

{% import 'macros/images.twig' as images %}

{% block contenu %}
  <main id="page-a-propos" aria-label="Scroll down to navigate through the pictures">
    <div class="storytelling">
      <div
        aria-hidden="true" class="storytelling__conteneur"
        inert
      >
        {# Animation #}
        <div class="storytelling__animation no-js">
          <svg
            alt="" class="animation-conteneur"
            height="90px" preserveAspectRatio="xMidYMin"
            viewBox="0 0 1200 90" width="100%"
            xmlns="http://www.w3.org/2000/svg"
          >
            <svg
              alt="Scroll down" class="animation-texte"
              height="100%" width="100%"
              y="50%"
            >
              <path
                d="m0 0c600-90 600 90 1200 0" fill="transparent"
                id="curve-1" transform="translate3d(0,0,0)"
              />

              {# TODO: Créer une fonction pour générer les images #}
              <text dominant-baseline="middle" transform="translate3d(0,0,0)">
                <textPath id="text-path-1" xlink:href="#curve-1">
                  Scroll down
                </textPath>
                <animate
                  attributeName="startOffset" dur="5s"
                  fill="remove" from="-50%"
                  to="0%" repeatCount="indefinite"
                  xlink:href="#text-path-1"
                />
              </text>

              <text dominant-baseline="middle" transform="translate3d(0,0,0)">
                <textPath id="text-path-2" xlink:href="#curve-1">
                  Scroll down
                </textPath>
                <animate
                  attributeName="startOffset" dur="5s"
                  fill="remove" from="0%"
                  to="50%" repeatCount="indefinite"
                  xlink:href="#text-path-2"
                />
              </text>

              <text dominant-baseline="middle" transform="translate3d(0,0,0)">
                <textPath id="text-path-3" xlink:href="#curve-1">
                  Scroll down
                </textPath>
                <animate
                  attributeName="startOffset" dur="5s"
                  fill="remove" from="50%"
                  to="100%" repeatCount="indefinite"
                  xlink:href="#text-path-3"
                />
              </text>

              <text dominant-baseline="middle" transform="translate3d(0,0,0)">
                <textPath id="text-path-4" xlink:href="#curve-1">
                  Scroll down
                </textPath>
                <animate
                  attributeName="startOffset" dur="5s"
                  fill="remove" from="100%"
                  to="150%" repeatCount="indefinite"
                  xlink:href="#text-path-4"
                />
              </text>
            </svg>
          </svg>
        </div>

        {# Images #}
        <div
          class="storytelling__image" data-index="1"
          tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="2" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="3" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="4" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="5" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="6" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="7" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="8" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="9" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="10" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="11" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="12" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
        </div>

        <div
          class="storytelling__image" data-caché
          data-index="13" tabindex="-1"
        >
          {{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
        </div>
      </div>
    </div>
  </main>
{% endblock contenu %}