{{ template "header.html" }}

<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.tag }}</span>
      <br />
      <br />
      <span><b>{{ .Data.Artworks.Total }}</b> works</span>

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

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

  <div class="switcher">
    <span class="switch-title">Type</span>
    <a
      href="/tags/{{ .Tag.Name }}?category=artworks&order={{ .Queries.Order }}&mode={{ .Queries.Mode }}&p=1"
      class="switch-button"
      >All</a
    >
    <a
      href="/tags/{{ .Tag.Name }}?category=illustrations&order={{ .Queries.Order }}&mode={{ .Queries.Mode }}&p=1"
      class="switch-button"
      >Illustrations</a
    >
    <a
      href="/tags/{{ .Tag.Name }}?category=manga&order={{ .Queries.Order }}&mode={{ .Queries.Mode }}&p=1"
      class="switch-button"
      >Manga</a
    >
  </div>
  <div class="switcher">
    <span class="switch-title">Order</span>
    <a
      href="/tags/{{ .Tag.Name }}?category={{ .Queries.Category }}&order=date_d&mode={{ .Queries.Mode }}&p=1"
      class="switch-button"
      >Newest</a
    >
    <a
      href="/tags/{{ .Tag.Name }}?category={{ .Queries.Category }}&order=date&mode={{ .Queries.Mode }}&p=1"
      class="switch-button"
      >Oldest</a
    >
  </div>
  <div class="switcher">
    <span class="switch-title">Filter</span>
    <a
      href="/tags/{{ .Tag.Name }}?category={{ .Queries.Category }}&order={{ .Queries.Order }}&mode=all&p=1"
      class="switch-button"
      >All</a
    >
    <a
      href="/tags/{{ .Tag.Name }}?category={{ .Queries.Category }}&order={{ .Queries.Order }}&mode=safe&p=1"
      class="switch-button"
      >Safe</a
    >
    <a
      href="/tags/{{ .Tag.Name }}?category={{ .Queries.Category }}&order={{ .Queries.Order }}&mode=r18&p=1"
      class="switch-button"
      >R18</a
    >
  </div>
  {{ if .Data.Popular.Recent }}
  <h2>Popular artworks</h2>
  <div class="thumbnail-container">
    {{ template "small-tn-normal.html" .Data.Popular.Recent }} {{ template
    "small-tn-normal.html" .Data.Popular.Permanent }}
  </div>
  {{ end }}
  <!-- Switchers here -->
  <br />
  <h2>Works</h2>
  <div>{{ template "small-tn.html" .Data.Artworks.Artworks }}</div>
</div>
{{ template "footer.html" }}