{{include "header.html"}}
{{include "nav.html"}}

{{if .Content}}
<section class="section">
  <div class="container article-layout">
    <div>
      <header class="article-header glass">
        <span class="kicker">gallery detail</span>
        <h1>{{.Content.Title}}</h1>
        <div class="article-topline">
          <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
          {{$badge := index .Content.Ext "badge"}}{{if $badge}}<span class="badge">{{$badge}}</span>{{end}}
          {{$palette := index .Content.Ext "palette"}}{{if $palette}}<span>{{$palette}}</span>{{end}}
        </div>
        {{if .Content.Description}}<p style="margin-top:16px;">{{.Content.Description}}</p>{{end}}
      </header>

      <article class="article-body glass">
        {{if .Content.Img}}<img class="article-cover" src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}
        <div class="chip-list" style="margin-bottom:24px;">
          {{$mood := index .Content.Ext "mood"}}{{if $mood}}<span class="chip">氛围：{{$mood}}</span>{{end}}
          {{$series := index .Content.Ext "series"}}{{if $series}}<span class="chip">系列：{{$series}}</span>{{end}}
          {{$tool := index .Content.Ext "tool"}}{{if $tool}}<span class="chip">工具：{{$tool}}</span>{{end}}
        </div>
        <div class="prose">{{.Content.Content | Str2Html}}</div>
      </article>

      {{if .Content.Albums}}
      <section class="section" style="padding-top:22px;">
        <div class="section-title">
          <div>
            <span class="kicker">album</span>
            <h2>更多画面</h2>
          </div>
        </div>
        <div class="gallery-grid">
          {{range .Content.Albums}}
            {{if .}}
            <article class="gallery-card glass">
              <img src="{{.}}" alt="{{$.Content.Title}}">
              <p>来自同一组作品的延伸画面。</p>
            </article>
            {{end}}
          {{end}}
        </div>
      </section>
      {{end}}
    </div>

    {{include "sidebar.html"}}
  </div>
</section>
{{end}}

{{include "js.html"}}
{{include "footer.html"}}