{{define "gallery_detail"}}
  <link rel="stylesheet" href="/static/css/gallery.css?v={{assetVer}}">

  <div class="mod-back"><a href="/gallery">← 返回影集</a></div>

  <article class="mod-detail-head">
    <h1 class="mod-detail-title">{{.Data.Album.Title}}</h1>
    <div class="mod-detail-meta">
      <span>{{ico "pen"}} 作者 · {{if .Data.Album.Author}}{{.Data.Album.Author}}{{else}}佚名{{end}}</span>
      <span>{{ico "clock"}} {{date .Data.Album.CreatedAt}}</span>
      <span>{{ico "camera"}} {{.Data.Album.PhotoCount}} 张</span>
      {{template "fav_button" dict "VD" . "Type" "gallery" "Key" .Data.Album.Slug "Title" .Data.Album.Title "URL" (printf "/gallery/%s" .Data.Album.Slug)}}
    </div>
    {{if .Data.Album.Summary}}<div class="mod-note" style="margin-top:14px;">{{strictMD .Data.Album.Summary}}</div>{{end}}
  </article>

  {{if .Data.Photos}}
  <section class="gal-views" id="galViews" data-gal-view="grid">
    <!-- 三种看法：整墙快看、大图细看、折叠摊开看 -->
    <div class="gal-switch" role="group" aria-label="换一种看法">
      <button class="gal-tab" type="button" data-view="grid" aria-pressed="true">{{ico "grid"}} 整墙</button>
      <button class="gal-tab" type="button" data-view="big" aria-pressed="false">{{ico "search"}} 大图</button>
      <button class="gal-tab" type="button" data-view="fold" aria-pressed="false">{{ico "book"}} 折叠</button>
      <span class="gal-switch-tip">换一种看法，下次打开还是这一种。</span>
    </div>

    <p class="gal-fold-note">折叠屏看法：一张图跨过中间的缝，左右各占一面屏；窄屏合上后，缝横过来一屏一张。</p>

    <div class="gal-wall">
      {{range .Data.Photos}}
      <figure class="gal-shot">
        <a class="gal-shot-link" href="{{.URL}}" target="_blank" rel="noopener">
          <img class="gal-solo" src="{{.URL}}" alt="{{if .Title}}{{.Title}}{{else}}{{$.Data.Album.Title}}{{end}}" loading="lazy">
          <!-- 折叠看法用：同一张图分成左右两半，中间留给铰链缝 -->
          <span class="gal-duo" aria-hidden="true">
            <span class="gal-pane gal-pane-l"><img src="{{.URL}}" alt="" loading="lazy"></span>
            <span class="gal-pane gal-pane-r"><img src="{{.URL}}" alt="" loading="lazy"></span>
          </span>
        </a>
        {{if .TagList}}
        <!-- 图片信息识别徽章：位置与样式由插件设置页（/admin/imgmeta/settings）控制，默认左上角毛玻璃 -->
        <span class="gal-badges{{if eq $.Data.BadgePos "tr"}} pos-tr{{else if eq $.Data.BadgePos "bl"}} pos-bl{{else if eq $.Data.BadgePos "br"}} pos-br{{end}}{{if eq $.Data.BadgeStyle "solid"}} style-solid{{end}}">
          {{range .TagList}}<span class="gal-badge">{{.}}</span>{{end}}
        </span>
        {{end}}
        <figcaption class="gal-cap">
          <b>{{if .Title}}{{.Title}}{{else}}未命名{{end}}</b>
          {{if or .ExifDate .ExifCam .ExifGPS}}
          <span class="gal-cap-meta">{{if .ExifDate}}{{ico "calendar"}} {{.ExifDate}}{{end}}{{if .ExifCam}}　{{ico "camera"}} {{.ExifCam}}{{end}}{{if .ExifGPS}}　{{ico "pin"}} {{.ExifGPS}}{{end}}</span>
          {{end}}
        </figcaption>
      </figure>
      {{end}}
    </div>
  </section>
  {{else}}
  <div class="mod-empty">这卷胶片还是空的，等第一张照片入场。</div>
  {{end}}

  {{if .Data.Album.Copyright}}
  <section class="mod-panel gallery-copy">
    <h2 class="mod-panel-title">© 版权声明 · 本页全部照片受此保护</h2>
    <p style="margin:0;font-size:13.5px;line-height:2;color:var(--ink-soft);">{{.Data.Album.Copyright}}</p>
  </section>
  {{end}}

  <p style="text-align:center;color:var(--muted);font-size:12.5px;margin:26px 0 6px;letter-spacing:1px;">— 一册收好 · 版权分明 —</p>

  <script>
  /* 换看法：只切一个属性，版面交给 CSS；选择记在本机，下次来还是上次那一种 */
  (function () {
    var box = document.getElementById('galViews');
    if (!box) return;

    var tabs = box.querySelectorAll('.gal-tab');
    var KEY = 'galView';
    var VIEWS = ['grid', 'big', 'fold'];

    function draw(view, keepScroll) {
      /* 换版面会改变页面高度，先把当前位置记下来，换完再放回去，视线不跳 */
      var y = window.pageYOffset || document.documentElement.scrollTop;
      box.setAttribute('data-gal-view', view);
      for (var i = 0; i < tabs.length; i++) {
        tabs[i].setAttribute('aria-pressed', tabs[i].getAttribute('data-view') === view ? 'true' : 'false');
      }
      if (keepScroll) window.scrollTo(0, y);
    }

    var saved = null;
    try { saved = window.localStorage.getItem(KEY); } catch (e) {}
    if (!saved || VIEWS.indexOf(saved) < 0) saved = 'grid';
    draw(saved, false);

    for (var i = 0; i < tabs.length; i++) {
      tabs[i].addEventListener('click', function () {
        var view = this.getAttribute('data-view');
        try { window.localStorage.setItem(KEY, view); } catch (e) {}
        draw(view, true);
      });
    }
  })();
  </script>
{{end}}