{{/*  Count number of gallery on page  */}}
{{- $.Page.Scratch.Add "gallerycount" 1 -}}
{{ $galno := $.Page.Scratch.Get "gallerycount" }}

{{/*  Initialise variables holding image paths  */}}
{{ $imgs := slice }}

{{/*  Get/sanitise image paths  */}}
{{ if .Params.isdir }}
  {{/*  Get images from folder, put into map  */}}
  {{ $imgdir := print "/static/" .Params.src }}
  {{- range readDir $imgdir -}}
  {{ $imgs = $imgs | append (print $.Params.src "/" .Name ) }}
  {{ end }}
{{ else }}
  {{/*  Get images from src Param, separated by comma  */}}
  {{ range (split .Params.src ",") }}
    {{ $imgs = $imgs | append (trim . " ") }}
  {{ end }}
{{ end }}

{{/*  Visible images  */}}
<div class="snap-wrapper" style="--columns:{{ default 4 .Params.columns }};--min-width:{{ default 200 .Params.minwidth }};">
{{ range $i, $img := $imgs }}
  <div class="snap-image">
    <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">
  </div>
{{ end }}
</div>

{{/*  The Modal/Lightbox  */}}
<div class="snap-lightbox" id="snap-lightbox-{{ $galno }}">
  {{ range $i, $img := $imgs }}
  <div class="snap-lightbox-inner">
    <div class="numbertext">{{ add $i 1 }} / {{ len $imgs }}</div>
    <img src="{{ $img }}" style="width:100%">
  </div>
  {{ end }}

  <!-- Close and Next/previous controls -->
  <span class="snap-close" onclick="closeModal({{ $galno }})">&times;</span>

  <a class="snap-lightbox-prev" onclick="plusSlides({{ $galno }}, -1)"><i class="snap-lightbox-arrow"></i></a>
  <a class="snap-lightbox-next" onclick="plusSlides({{ $galno }}, 1)"><i class="snap-lightbox-arrow"></i></a>

  {{/*  <!-- Caption text -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>  */}}
</div>


{{/*  Load CSS/JS and make sure it is only loaded once  */}}
{{- if eq ($.Page.Scratch.Get "gallerycount") 1 }}
{{- with resources.Get "scss/snap-gallery.scss" | toCSS }}
<link rel="stylesheet" href="{{ .RelPermalink }}" crossorigin="anonymous">
{{- end }}
<script src="/js/snap-gallery.js"></script>
{{ end }}