{{- extends "layout/default" }}
{{- import "blocks/switcher" }}
{{- import "blocks/underlinenav" }}
{{- import "blocks/pagination" }}
{{- block body() }}

<div class="d-none">
  <p>Artworks</p>
  <p>Illustrations</p>
  <p>Manga</p>
  <p>All</p>
  <p>Portrait</p>
  <p>Square</p>
  <p>Landscape</p>
  <p>Newest</p>
  <p>Oldest</p>
  <p>All</p>
  <p>Safe</p>
  <p>R-18</p>
  <p>None</p>
  <p>Exact (tags)</p>
  <p>Partial (tags)</p>
  <p>Title/Caption</p>
</div>

<div class="row justify-content-center">
  <!-- Tag header -->
  <div class="col-11 col-lg-8">
    <div class="row bg-neutral-800 rounded-5 g-0">
      {{- if .Tag.Metadata.ID }}
      <!-- Tag artwork -->
      <div class="col-12 col-lg-3 thumbnail-hover-dark">
        <div class="thumbnail-wrapper rounded-top-5 rounded-start-lg-5 rounded-end-lg-0 w-100 h-100 overflow-hidden">
          <a href="/artworks/{{ .Tag.Metadata.ID }}">
            <img
              srcset="{{ .Tag.Metadata.Image }}, {{ .Tag.Metadata.ImageMaster }} 2x"
              src="{{ .Tag.Metadata.ImageMaster }}"
              alt="{{ .Tag.Name }}"
              class="img-fluid w-100 h-100 object-fit-cover"
            />
          </a>
        </div>
      </div>
      {{- end }}
      <!-- Tag information -->
      {{- if .Tag.Metadata.ID }}
      <div class="col-12 col-lg-9 d-flex flex-column p-4">
      {{- else }}
      <div class="col-12 d-flex flex-column p-4">
      {{- end }}
        <div>
          <div class="d-flex flex-column justify-content-start align-items-center mb-2">
            <h2 class="display-6 fw-bold me-2 mb-1 mb-lg-0">#{{ .Tag.Name }}</h2>
            <h3 class="flex-shrink-1 text-body-secondary mb-0">{{ .Tag.Metadata.Name }}</h3>
          </div>

          <p class="text-center lead mb-0"><span class="fw-bold">{{ .Data.Artworks.Total }}</span> <span class="fw-medium text-body-secondary">works</span></p>

          {{- if .Tag.Metadata.Detail }}
          <p class="lead mb-0 mt-3">{{ .Tag.Metadata.Detail }}</p>
          {{- end }}
        </div>

        <div class="d-flex mt-auto">
          <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 ms-auto mt-2">
            <small class="text-center">
              <i class="bi bi-box-arrow-up-right me-1"></i>
              <a href="https://dic.pixiv.net/a/{{ .Tag.Name }}" class="text-body-secondary fw-semibold" target="_blank">View entry on pixpedia</a>
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>

  {* Related tags *}
  <div class="col-12 col-lg-9 mt-4">
    <div class="d-flex flex-nowrap overflow-scroll">
      {{- range .Data.RelatedTags }}
      <a href="/tags/{{ escapeString(.Name) }}">
        <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
          <small class="d-flex flex-column align-items-center">
            <span>
              <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
            </span>
            {{- if .TranslatedName }}
            <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
            {{- end }}
          </small>
        </div>
      </a>
      {{- end }}
    </div>
  </div>

  <noscript>
    {{- include "noscript/tag" }}
  </noscript>

  <!-- Popular artworks -->
  {{- if len(.Data.Popular.Permanent) + len(.Data.Popular.Recent) != 0 }}
  <div class="col-11 mt-5">
    <div class="d-flex rounded-end-5 border border-5 border-top-0 border-end-0 border-bottom-0 border-custom-color bg-neutral-800 p-4">
      <div class="row g-4">
        <h2 class="mb-0"><i class="bi bi-bar-chart-line me-2"></i>Popular works</h2>
        <hr class="border-neutral-700 opacity-100 rounded mb-0">
        {{- if len(.Data.Popular.Permanent) != 0 }}
        <div class="col-12 col-lg-6">
          <h3>All time</h3>
          <div class="row row-cols-2 row-cols-md-4 g-4">
            {{- include "fragments/small-tn" .Data.Popular.Permanent }}
          </div>
        </div>
        {{- end }}
        {{- if len(.Data.Popular.Recent) != 0 }}
        <div class="col-12 col-lg-6">
          <h3>Recent</h3>
          <div class="row row-cols-2 row-cols-md-4 g-4">
            {{- include "fragments/small-tn" .Data.Popular.Recent }}
          </div>
        </div>
        {{- end }}
      </div>
    </div>
  </div>
  {{- end }}

  <!-- Categories -->
  <div id="checkpoint" class="col-12 mt-5">
    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto">
      <div class="mb-3 mb-md-0">
        {{- _Category:= isset(.Queries.category) ? .Queries.category : "artworks" }}
        {{- URL := unfinishedQuery(.QueriesC, "category") }}
        {{- path := slice("artworks" + "#", "illustrations" + "#", "manga" + "#") }}
        {{- name := slice("Top", "Illustrations", "Manga") }}
        {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveCategory + "#") }}
      </div>

        {{- _Mode := isset(.Queries.mode) ? .Queries.mode : "safe" }}
        {{- URL := unfinishedQuery(.QueriesC, "mode") }}
        {{- path := slice("all" + "#", "safe" + "#", "r18" + "#") }}
        {{- name := slice("All", "Safe", "R-18") }}
        {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveMode + "#") }}
    </div>
  </div>

  <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">

  <!-- Main works -->
  <div class="col-12">
    <div class="d-flex flex-row align-items-center justify-content-start justify-content-sm-start mb-4">
      <h1 class="mb-0 me-3"><i class="bi bi-collection me-2"></i>{{ .Data.Artworks.Total }} works</h1>
      <button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#SearchOptionsModal">
        <i class="bi bi-gear-fill"></i>
      </button>
    </div>

    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 mb-4">
      {{- include "fragments/small-tn" .Data.Artworks.Artworks }}
    </div>

    <!-- Pagination -->
    {{- url := unfinishedQuery(.QueriesC, "page") }}
    {{- paginationData := createPaginator(url, "#checkpoint", .Page, -1, 1, 5) }}
    {{- yield pagination(data=paginationData) }}
  </div>

</div>

<!-- End of main content -->

<!-- Search options modal -->
<!-- NOTE: unlike the modals on the ranking and calendar ranking pages, this one uses mb-4 due to the amount of options, which causes mb-3 to feel cluttered -->
<div class="modal fade" id="SearchOptionsModal" tabindex="-1" aria-labelledby="SearchOptionsModalLabel" aria-hidden="true" hx-boost="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
      <div class="modal-header border-0 p-0 mb-4">
        <h2 class="modal-title" id="SearchOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Search options</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div class="row">
          <div class="col-12 mb-4">
            <h3><i class="bi bi-sort-down me-2"></i>Order</h3>
            {{- if .PopularSearchEnabled == true }}
              {{- _Order := isset(.Queries.order) ? .Queries.order : "date_d" }}
              {{- URL := unfinishedQuery(.QueriesC, "order") }}
              {{- path := slice("date_d", "date", "popular") }}
              {{- name := slice("Newest", "Oldest", "Popular") }}
              {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveOrder) }}
              <div class="text-body-secondary rounded-end-5 border border-5 border-top-0 border-end-0 border-bottom-0 border-custom-color bg-neutral-800 ps-2 py-2 mt-3 mb-0">
                The "Popular" sorting uses <code>users入り</code> bookmark count tags to show the most-liked works, but is limited to one page and specific milestones. If no results appear, the tag likely lacks bookmark data. Try broader tags like <code>#アイマス</code> instead of <code>#アイドルマスターシャイニーカラーズ</code> for better results.
              </div>
            {{- else }}
              {{- _Order := isset(.Queries.order) ? .Queries.order : "date_d" }}
              {{- URL := unfinishedQuery(.QueriesC, "order") }}
              {{- path := slice("date_d", "date") }}
              {{- name := slice("Newest", "Oldest") }}
              {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveOrder) }}
            {{- end }}
          </div>
        </div>

        <div class="row">
          <div class="col-12 mb-4">
            <h3><i class="bi bi-aspect-ratio-fill me-2"></i>Ratio</h3>
            {{- _Ratio := isset(.Queries.ratio) ? .Queries.ratio : "" }}
            {{- URL := unfinishedQuery(.QueriesC, "ratio") }}
            {{- path := slice("", "-0.5", "0", "0.5") }}
            {{- name := slice("All", "Portrait", "Square", "Landscape") }}
            {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveRatio) }}
          </div>
        </div>

        <div class="row">
          <div class="col-12 mb-4">
            <h3><i class="bi bi-search me-2"></i>Search mode</h3>
            {{- SearchMode := isset(.Queries.smode) ? .Queries.smode : "" }}
            {{- URL := unfinishedQuery(.QueriesC, "smode") }}
            {{- path := slice("", "s_tag_full", "s_tag", "s_tc") }}
            {{- name := slice("None", "Exact (tags)", "Partial (tags)", "Title/Caption") }}
            {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveSearchMode) }}
          </div>
        </div>

        <!-- Advanced settings -->
        <div class="accordion mb-5" id="advancedSettingsModal">
          <div class="accordion-item">
            <div class="accordion-header rounded-2" id="headingAdvancedModal">
              <button class="accordion-button bg-charcoal-surface2 text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvancedModal" aria-expanded="false" aria-controls="collapseAdvancedModal">
                <h3 class="mb-0"><i class="bi bi-gear-fill me-2"></i>Advanced settings</h3>
              </button>
            </div>
            <div id="collapseAdvancedModal" class="accordion-collapse collapse" aria-labelledby="headingAdvancedModal" data-bs-parent="#advancedSettingsModal">
              <div class="accordion-body bg-charcoal-surface1 rounded-2">
                {{- URL := unfinishedQuery(.QueriesC, "") }}
                <form action="{{ URL }}&name={{ .QueriesC.Query[" Name"] }}" method="post" class="row g-3">
                  <div class="col-md-6">
                    <label for="wlt-modal" class="form-label">Minimum image width</label>
                    <input type="text" class="form-control" id="wlt-modal" name="wlt" value="{{ .QueriesC.Query[" Wlt"] }}" />
                  </div>
                  <div class="col-md-6">
                    <label for="wgt-modal" class="form-label">Maximum image width</label>
                    <input type="text" class="form-control" id="wgt-modal" name="wgt" value="{{ .QueriesC.Query[" Wgt"] }}" />
                  </div>
                  <div class="col-md-6">
                    <label for="hlt-modal" class="form-label">Minimum image height</label>
                    <input type="text" class="form-control" id="hlt-modal" name="hlt" value="{{ .QueriesC.Query[" Hlt"] }}" />
                  </div>
                  <div class="col-md-6">
                    <label for="hgt-modal" class="form-label">Maximum image height</label>
                    <input type="text" class="form-control" id="hgt-modal" name="hgt" value="{{ .QueriesC.Query[" Hgt"] }}" />
                  </div>
                  <div class="col-md-6">
                    <label for="scd-modal" class="form-label">Posted after (format: yyyy-mm-dd)</label>
                    <input type="text" class="form-control" id="scd-modal" name="scd" value="{{ .QueriesC.Query[" Scd"] }}" />
                  </div>
                  <div class="col-md-6">
                    <label for="ecd-modal" class="form-label">Posted before (format: yyyy-mm-dd)</label>
                    <input type="text" class="form-control" id="ecd-modal" name="ecd" value="{{ .QueriesC.Query[" Ecd"] }}" />
                  </div>
                  <div class="col-12">
                    <label for="tool-modal" class="form-label">Tool</label>
                    <input type="text" class="form-control" id="tool-modal" name="tool" value="{{ .QueriesC.Query[" Tool"] }}" />
                  </div>
                  <div class="col-12">
                    <button type="submit" class="custom-btn-secondary">Set</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-12 d-flex justify-content-between">
            <a href="{{ unfinishedQuery(.QueriesC, "") }}" type="button" class="btn btn-danger fw-bold rounded-pill">Reset filters</a>
            <button type="button" class="custom-btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{- end }}