{{ define "styles"}}
{{ $customCSS := resources.Get "css/index.css" | resources.ToCSS }}
<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">
{{ end }}

{{ define "content" }}
    <section class="has-background-black is-fullheight">
        <div id="galerie" class="carousel">
                {{ $carouselImages := resources.Match "carousel/*"}}
                {{ range $carouselImages }}
                {{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
                {{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
                <figure class="image">
                    <picture>
                        <source srcset="{{ $webp.Permalink }}" type="image/webp">
                        <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}"  alt="{{ .Permalink }}">
                    </picture>
                </figure>
                {{ end }}
        </div>
        <div id="news" class="box carousel overlay">
            {{ range where .Site.RegularPages "Section" "spectacles" }}
            {{ if and (isset .Params "actu") (.Params.actu) }}
            <div> 
                <div class="title pb-3">Actualités</div>
                <div class="subtitle">{{ .Title }}</div>
                <p class="p-0-mobile px-4-tablet">{{ .Params.actu }}</p>
            </div>
            {{ end }}
            {{ end }}

        </div>

    </section>     
{{ end }}

{{ define "scripts"}}
<script>
    bulmaCarousel.attach('#galerie', {
    slidesToScroll: 1,
    slidesToShow: 1,
    navigation: false,
    navigationKeys: false,
    pagination: false,
    loop: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    pauseOnHover: false,
    duration: 300
});
</script>
<script>
    bulmaCarousel.attach('#news', {
    slidesToScroll: 1,
    slidesToShow: 1,
    navigation: false,
    navigationKeys: false,
    pagination: false,
    loop: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 5000,
    pauseOnHover: false,
    duration: 500
});
</script>
{{ end }}