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

{{ define "content" }}
<section class="section is-large p-0 m-0 has-background-warning-light">
    <div id="title-section" class="columns p-0 m-0">
        <div class="column is-two-thirds p-5 m-0  is-flex is-justify-content-center is-align-items-center">
            <h1 class="title has-text-centered is-size-1 has-text-weight-bold">{{ .Title }}</h1>
        </div>
        <div class="column m-0 is-one-third has-background-black is-hidden-mobile"></div>
    </div>
</section>
<section class="section is-large p-0 m-0 has-background-warning">
    <div class="columns p-0 m-0">
        <div class="column is-four-fifths p-0 m-0 has-background-danger">
            {{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
            {{ with $img }}
            {{- $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 class="column is-one-fifth p-0 m-0 has-background-success is-flex is-justify-content-center is-align-items-center is-size-3">
            <div class="has-text-black has-text-weight-bold p-6">{{ .Date.Year}}</div>
        </div>
    </div>
</section>
<section class="section is-large p-0 m-0 has-background-warning">
    <div class="columns p-0 m-0">
        <div class="column is-1 has-background-black is-hidden-mobile"></div>
        <div class="column is-10 p-6 has-background-warning-light">
            <h2 class="subtitle">{{ .Params.Subtitle }}</h2>
            <div class="has-text-black">{{ .Content }}</div>
        </div>
        <div class="column is-1 has-background-black is-hidden-mobile"></div>
    </div>
</section>

<section class="section is-large p-0 m-0 has-background-warning">
    <div class="columns p-0 m-0">
        <div class="column p-6 is-two-fifths has-background-primary-dark has-text-black">
            <h2 class="subtitle mb-6">En savoir plus</h2>
            {{ $presse := resources.GetMatch (print .File.Dir "/dossier.pdf") }}
            {{ with $presse }}
            <div class="columns is-gapless is-vcentered ">
                <div class="column">
                    <a href={{ .Permalink }}>
                        <h3 class="title is-6">Télécharger le Dossier de présentation</h3>
                    </a>
                </div>
            </div>

            {{ end }}


            {{ with .Params.Dates }}
                <h3 class="title is-6">Prochaines Dates</h3>
                    {{ range .}}
                        <div class="columns is-gapless">
                            {{ if in (printf "%T" .) "map" }}
                                {{ range $month, $events := . }}
                                    <div class="column is-3 is-flex is-flex-direction-column is-justify-content-center">
                                        <h4 class="title is-7">{{ $month }}</h4>
                                    </div>
                                    <div class="column is-9">
                                        <ul>
                                            {{ range $events }}
                                            <li>{{ . }}</li>
                                            {{ end }}
                                        </ul>
                                    </div>
                                {{ end }}
                            {{ else }}
                            <p>{{ . }}</p>
                            {{ end }}
                        </div>
                    {{ end }}
            {{ end }}

        </div>
        <div class="column is-three-fifths p-0 m-0  has-background-danger  is-hidden-mobile">
            {{ $img := resources.GetMatch ( print .File.Dir "/savoir.*") }}
            {{ with $img }}
            {{- $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>
</section>
<section class="section is-large p-6 m-0 has-background-black  has-text-white">
    <h2 class="subtitle">Crédits</h2>
    <div class="columns is-multiline mt-2">
        {{ $param := .Params.Credits }}
        {{ range $param }}
        <div class="column is-one-quarter">{{ .role }}</div>
        {{ if and $param (not (isset .name 0))}}
        <div class="column is-three-quarters">{{ .name  | markdownify }}</div>
        {{ else }}
        <div class="column is-three-quarters">
            <ul>
                {{ range .name }}
                <li>{{ . | markdownify }}</li>
                {{ end }}
            </ul>
        </div>
        {{ end }}
        {{ end }}
    </div>
</section>
<section class="section is-large m-0 p-6 has-background-black">
    <h2 class="subtitle">Galerie</h2>
    <div class="container" style="height: 20vh; overflow: hidden;">
        <div id="galerie" class="carousel">
            {{ $imgs := (resources.Match ( print .File.Dir "/*")).ByType "image" }}

            {{ with $imgs }}
            {{ range $imgs }}
            {{- $jpeg := .Resize "600x jpeg" }}
            {{- $webp := .Resize "600x webp picture" }}
            <picture>
                <source srcset="{{ $webp.Permalink }}" type="image/webp">
                <img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}"  alt="{{ .Name }}">
            </picture>         
            {{ end}}
            {{ end }}
        </div>
    </div>
</section>

{{ end }}

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