<div class="container">
  <div class="tag-header">
    {{ if Tag.Metadata.ID }}
    <a href="/artworks/{{ Tag.Metadata.ID }}">
      <img class="tag-thumbnail" src="{{ Tag.Metadata.Image }}" alt="{{ Tag.Name }}" />
    </a>
    {{ end }}

    <div class="tag-details">
      <b class="main-tag">#{{ Tag.Name }}</b>
      <span class="translated-tag">{{ Tag.Metadata.Name }}</span>
      <br />
      <br />
      <span><b>{{ Data.Artworks.Total }}</b> works</span>

      <p class="tag-description">{{ Tag.Metadata.Detail }}</p>
    </div>
  </div>

  <div class="artwork-container-scroll">
    {{ range Data.RelatedTags }}
    <a href="/tags/{{ . }}">
      <div class="tag-container">
        <div class="main">#{{ . }}</div>
      </div>
    </a>
    {{ end }}
  </div>

  <div class="switcher">
    <div class="switch-title">Category</div>
    {{ URL := URLC(Queries, "category") }}
    <a href='{{URL}}artworks#checkpoint' class="switch-button">Artworks</a>
    <a href='{{URL}}illustrations#checkpoint' class="switch-button">Illustrations</a>
    <a href='{{URL}}manga#checkpoint' class="switch-button">Manga</a>
  </div>
  <div class="switcher">
    <div class="switch-title">Order</div>
    {{ URL := URLC(Queries, "order") }}
    <a href='{{URL}}date_d#checkpoint' class="switch-button">Newest</a>
    <a href='{{URL}}date#checkpoint' class="switch-button">Oldest</a>
  </div>
  <div class="switcher">
    <div class="switch-title">Filter</div>
    {{ URL := URLC(Queries, "mode") }}
    <a href='{{URL}}all#checkpoint' class="switch-button">All</a>
    <a href='{{URL}}safe#checkpoint' class="switch-button">Safe</a>
    <a href='{{URL}}r18#checkpoint' class="switch-button">R-18</a>
  </div>
    <div class="switcher">
      <div class="switch-title">Ratio</div>
      {{ URL := URLC(Queries, "ratio") }}
      <a href='{{URL}}#checkpoint' class="switch-button">All</a>
      <a href='{{URL}}-0.5#checkpoint' class="switch-button">Portrait</a>
      <a href='{{URL}}0#checkpoint' class="switch-button">Square</a>
      <a href='{{URL}}0.5#checkpoint' class="switch-button">Landscape</a>
    </div>
    <div class="switcher">
      <div class="switch-title">Search mode</div>
      {{ URL := URLC(Queries, "smode") }}
      <a href='{{URL}}#checkpoint' class="switch-button">None</a>
      <a href='{{URL}}s_tag_full#checkpoint' class="switch-button">Exact (tags)</a>
      <a href='{{URL}}s_tag#checkpoint' class="switch-button">Partial (tags)</a>
      <a href='{{URL}}s_tc#checkpoint' class="switch-button">Title/Caption</a>
    </div>
  <details>
    <summary>
    <h2>Advanced settings</h2>
    </summary>
      {{ URL := URLC(Queries, "") }}
      <form action="{{ URL }}&name={{ Queries.Hash.Name }}" method="post">
        <label for="wlt">Minimum image width</label>
        <input type="text" name="wlt" value="{{ Queries.Hash.Wlt }}" />
        <label for="wgt">Maximum image width</label>
        <input type="text" name="wgt" value="{{ Queries.Hash.Wgt }}" />
        <label for="hlt">Minimum image height</label>
        <input type="text" name="hlt" value="{{ Queries.Hash.Hlt }}" />
        <label for="hgt">Maximum image height</label>
        <input type="text" name="hgt" value="{{ Queries.Hash.Hgt }}" />
        <label for="scd">Posted after (format: yyyy-mm-dd)</label>
        <input type="text" name="scd" value="{{ Queries.Hash.Scd }}" />
        <label for="ecd">Posted before (format: yyyy-mm-dd)</label>
        <input type="text" name="ecd" value="{{ Queries.Hash.Ecd }}" />
        <label for="tool">Tool</label>
        <input type="text" name="tool" value="{{ Queries.Hash.Tool }}" />
        <input type="submit" value="Set" />
      </form>
  </details>
  {{ if Data.Popular.Recent }}
  <h2>Popular artworks</h2>
  <h3>Recent</h3>
  <div class="artwork-container-scroll">
    {{ include "components/small-tn" Data.Popular.Recent }}
  </div>
  <h3>All Time</h3>
  <div class="artwork-container-scroll">
    {{ include "components/small-tn" Data.Popular.Permanent }}
  </div>
  {{ end }}
  {* Switchers here *}
  <br />
  <h2>Works</h2>
  <div class="artwork-container">
    {{ include "components/small-tn" Data.Artworks.Artworks }}
  </div>

  <div class="pagination">
    {{ url := URLC(Queries, "page") }}
    <small>Page {{ Page }}</small>
    <br />
    {{ raw: createPaginator(url, "#checkpoint", Page, -1) }}
  </div>
</div>
