{{ define "main" }}
    <h2>{{ .Title }}</h2>

    {{ .Content }}

    {{ $paginator := .Paginate (where .Pages "Type" "art") 50 }}
    <div class="grid">
    {{ range $paginator.Pages }}
            {{ $pixiv_icon := resources.Get "pixiv.webp" }}
            {{ $newgrounds_icon := resources.Get "newgrounds.webp" }}

            {{ $full := resources.Get (printf "art/%s.webp" .Params.slug) }}
            {{ if $full }}

            {{ $filename_without_ext := .Params.slug }}

            {{ $month := 1 }}

            {{ if .Params.date }}
                {{ $split := split .Params.date "-" }}
                {{ $month = index $split 0 }}
            {{ end }}

            <a href="{{ .Permalink }}">
            {{ $path := printf "/art/%d/%.2d/%s" (int 2022) (int $month) $filename_without_ext}}
                    {{ $title := .Params.title }}
                    {{ $image := (resources.Get (printf "art/%s.webp" .Params.slug)).Resize "600x" }}
                    {{ with $image }}
                    <img class="grid-item" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $title }}" src="{{ .Permalink }}"/>
                    {{ else }}
                    <p>Thumbnail not found!</p>
                    {{ end }}
            {{ else }}
            </a>

            <em>CANNOT FIND {{.Params.slug }}</em>

            {{ end }}
    {{ end }}
        </div>
    {{ template "_internal/pagination.html" . }}

    <script>
    imagesLoaded( document.querySelector('.grid'), function( instance ) {
    console.log('all images are loaded');
    var msnry = new Masonry( '.grid', {
        itemSelector: '.grid-item',
        columnWidth: 200,
        fitWidth: true,
        gutter: 10
    });
    });
    </script>

{{ end }}