{{ define "main" }}
<header class="header">
  <h3 class="terms__title h3">{{ .Title }}</h3>
  <div class="gallery__contents">
    {{ .Content }}
  </div>
</header>

{{ if in (lower .Params.Mode) "one" }}

<main class="gallery main">
  <div class="grid single__contents">
    <div class="grid-sizer"></div>
    {{ if .File.Dir }}
      {{ $basename := (replace .File.Dir "\\" "/") }}
      {{ range .Params.Images }}
      <div class="grid-item">
        <img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}"/>
        <div class="grid-item__desc hide">{{ .caption }}</div>
      </div>
      {{ end }}
    {{ end }}
  </div>
  {{ partial "pagination/pagination-single" . }}
</main>

{{ else }}

<main class="gallery main">
  <div class="grid single__contents">
    <div class="grid-sizer"></div>
    {{ if .File.Dir }}
      {{ $basename := (replace .File.Dir "\\" "/") }}
      {{ range (readDir (print "./static/" $basename)) }}
      <div class="grid-item">
        <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/>
        <div class="grid-item__desc hide">{{ index (split .Name ".") 0 }}</div>
      </div>
      {{ end }}
    {{ end }}
  </div>
  {{ partial "pagination/pagination-single" . }}
</main>

{{ end }}

{{ partial "body/photoswipe" . }}

{{ $masonry := resources.Get `js/masonry.pkgd.min.js` | resources.Fingerprint }}
<script defer src="{{ $masonry.RelPermalink }}"></script>
{{ $imagesloaded := resources.Get `js/imagesloaded.pkgd.min.js` | resources.Fingerprint }}
<script defer src="{{ $imagesloaded.RelPermalink }}"></script>

<script>
  $(document).ready(function () {
    var $grid = $('.grid').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true,
    });
    $grid.imagesLoaded().progress(function () {
      $grid.masonry();
    });

    $('.grid-item').mouseenter(function () {
      $(this).children('.grid-item__desc').show();
    });

    $('.grid-item').mouseleave(function () {
      $(this).children('.grid-item__desc').hide();
    });

    enquire.register("screen and (max-width:500px)", {
      match: function () {
        $('.grid-item').addClass('full');
        $('.grid-sizer').addClass('full');
        $('.grid-item').removeClass('half');
        $('.grid-sizer').removeClass('half');
      },
      unmatch: function () {
        $('.grid-item').addClass('half');
        $('.grid-sizer').addClass('half');
        $('.grid-item').removeClass('full');
        $('.grid-sizer').removeClass('full');
      },
    }).register("screen and (max-width:700px)", {
      match: function () {
        $('.grid-item').addClass('half');
        $('.grid-sizer').addClass('half');
        $('.grid-item').removeClass('third');
        $('.grid-sizer').removeClass('third');
      },
      unmatch: function () {
        $('.grid-item').addClass('third');
        $('.grid-sizer').addClass('third');
        $('.grid-item').removeClass('half');
        $('.grid-sizer').removeClass('half');
      },
    }).register("screen and (max-width:900px)", {
      match: function () {
        $('.grid-item').addClass('third');
        $('.grid-sizer').addClass('third');
        $('.grid-item').removeClass('quarter');
        $('.grid-sizer').removeClass('quarter');
      },
      unmatch: function () {
        $('.grid-item').addClass('quarter');
        $('.grid-sizer').addClass('quarter');
        $('.grid-item').removeClass('third');
        $('.grid-sizer').removeClass('third');
      },
    }).register("screen and (max-width:1200px)", {
      match: function () {
        $('.grid-item').addClass('quarter');
        $('.grid-sizer').addClass('quarter');
        $('.grid-item').removeClass('fifth');
        $('.grid-sizer').removeClass('fifth');
      },
      unmatch: function () {
        $('.grid-item').addClass('fifth');
        $('.grid-sizer').addClass('fifth');
        $('.grid-item').removeClass('quarter');
        $('.grid-sizer').removeClass('quarter');
      },
    });
  });     
</script>

{{ end }}