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

<div class="row justify-content-center g-4">
  <!-- NOTE: mb-5 used here to give the main content a bit more space at the cost of some consistency -->
  <div class="col-12 mb-5">
    <!-- Tag header -->
    <div class="custom-card bg-charcoal-surface1">
      <div class="row g-0">
        {{- if .Tag.Metadata.ID }}
        <!-- Tag artwork -->
        <div class="col-md-4 d-flex thumbnail-hover-dark">
          <div class="thumbnail-wrapper rounded-top-5 rounded-start-md-5 rounded-end-md-0 w-100 overflow-hidden">
            <a href="/artworks/{{ .Tag.Metadata.ID }}">
              <img src="{{ .Tag.Metadata.Image }}" alt="{{ .Tag.Name }}" class="img-fluid w-100 h-100 object-fit-cover" />
            </a>
          </div>
        </div>
        {{- end }}
        <!-- Tag information -->
        <div class="col-md-8">
          <div class="custom-card-body p-4">
            <!-- <div class="d-flex flex-wrap justify-content-between align-items-start"> -->
              <div class="d-flex flex-column flex-md-row justify-content-start align-items-start align-items-md-center">
                <h2 class="display-6 fw-bold me-2 mb-0">#{{ .Tag.Name }}</h2>
                <span class="h3 text-muted mb-0">{{ .Tag.Metadata.Name }}</span>
              </div>
            <!-- </div> -->
            <p class="lead"><span class="fw-bold">{{ .Data.Artworks.Total }}</span> <span class="fw-medium text-muted">works</span></p>
            <!-- mb-0 to remove the extra bottom margin Bootstrap adds to p class="lead" -->
            <p class="lead">{{ .Tag.Metadata.Detail }}</p>
            <div class="d-flex flex-wrap align-items-center">
              {{- range .Data.RelatedTags }}
              <span class="badge fw-normal me-2 mb-2 p-0 text-wrap text-break text-start">
                <a href="/tags/{{ . }}" class="text-decoration-none text-wrap text-break">#{{ . }}</a>
              </span>
              {{- end }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <noscript>
    <div class="col-12">
      <div class="custom-card bg-charcoal-surface1">
        <div class="custom-card-body p-4">
          <h2 class="mb-4"><i class="bi bi-gear-fill me-2"></i> Search settings</h2>
          <!-- The first row represents Category, Ratio, Filter, and Order -->
          <div class="row">
            <!-- Category: Always first on both large and small screens -->
            <div class="col-lg-7 mb-5 order-1 order-lg-1">
              <h3><i class="bi bi-grid-fill me-2"></i>Category</h3>
              {{- Category := isset(.Queries.category) ? .Queries.category : "artworks" }}
              {{- URL := unfinishedQuery(.QueriesC, "category") }}
              {{- path := slice("artworks", "illustrations", "manga") }}
              {{- name := slice("Artworks", "Illustrations", "Manga") }}
              {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveCategory) }}
            </div>

            <!-- Ratio: Second in small screens, but third in large screens -->
            <div class="col-lg-7 mb-5 order-2 order-lg-3">
              <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>

            <!-- Filter: Third in small screens, but second in large screens -->
            <div class="col-lg-5 mb-5 order-3 order-lg-2">
              <h3><i class="bi bi-funnel-fill me-2"></i>Filter</h3>
              {{- 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>

            <!-- Order: Fourth in both large and small screens -->
            <div class="col-lg-5 mb-5 order-4 order-lg-4">
              <h3><i class="bi bi-sort-down me-2"></i>Order</h3>
              {{- 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) }}
            </div>
          </div>

          <!-- The second row represents Search Mode which is always last -->
          <div class="row">
            <!-- Search Mode: Always last on both large and small screens -->
            <div class="col-lg-12 mb-5 order-5 order-lg-5">
              <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" id="advancedSettings">
            <div class="accordion-item">
              <div class="accordion-header rounded-2" id="headingAdvanced">
                <button class="accordion-button bg-charcoal-surface2 text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
                  <h3 class="mb-0"><i class="bi bi-gear-fill me-2"></i>Advanced settings</h3>
                </button>
              </div>
              <div id="collapseAdvanced" class="accordion-collapse collapse" aria-labelledby="headingAdvanced" data-bs-parent="#advancedSettings">
                <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" class="form-label">Minimum image width</label>
                      <input type="text" class="form-control" id="wlt" name="wlt" value="{{ .QueriesC.Query[" Wlt"] }}" />
                    </div>
                    <div class="col-md-6">
                      <label for="wgt" class="form-label">Maximum image width</label>
                      <input type="text" class="form-control" id="wgt" name="wgt" value="{{ .QueriesC.Query[" Wgt"] }}" />
                    </div>
                    <div class="col-md-6">
                      <label for="hlt" class="form-label">Minimum image height</label>
                      <input type="text" class="form-control" id="hlt" name="hlt" value="{{ .QueriesC.Query[" Hlt"] }}" />
                    </div>
                    <div class="col-md-6">
                      <label for="hgt" class="form-label">Maximum image height</label>
                      <input type="text" class="form-control" id="hgt" name="hgt" value="{{ .QueriesC.Query[" Hgt"] }}" />
                    </div>
                    <div class="col-md-6">
                      <label for="scd" class="form-label">Posted after (format: yyyy-mm-dd)</label>
                      <input type="text" class="form-control" id="scd" name="scd" value="{{ .QueriesC.Query[" Scd"] }}" />
                    </div>
                    <div class="col-md-6">
                      <label for="ecd" class="form-label">Posted before (format: yyyy-mm-dd)</label>
                      <input type="text" class="form-control" id="ecd" name="ecd" value="{{ .QueriesC.Query[" Ecd"] }}" />
                    </div>
                    <div class="col-12">
                      <label for="tool" class="form-label">Tool</label>
                      <input type="text" class="form-control" id="tool" 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>
      </div>
    </div>
  </noscript>

  <div class="col-12">
    <div class="d-flex flex-row align-items-center justify-content-between mb-4">
      <!-- TODO: use the actual mode and content names instead of variables, and make weekly and monthly show a date range -->
      <h1 class="text-capitalize mb-0"><i class="bi bi-tag-fill me-2"></i>Results for #{{ .Tag.Name }}</h1>
      <button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#SearchOptionsModal">
        <i class="bi bi-gear-fill me-2"></i>Options
      </button>
    </div>

    <!-- Popular artworks -->
    {{- if .Data.Popular.Recent }}
    <h2>Popular artworks</h2>
    <h3>Recent</h3>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 mb-4">{{- include "fragments/small-tn" .Data.Popular.Recent }}</div>
    <h3>All Time</h3>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4 mb-4">{{- include "fragments/small-tn" .Data.Popular.Permanent }}</div>
    {{- end }}

    <!-- Main works -->
    <h2 id="checkpoint">Works</h2>
    <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">
        <!-- The first row represents Category, Ratio, Filter, and Order -->
        <div class="row">
          <!-- Category: Always first on both large and small screens -->
          <div class="col-lg-7 mb-5 order-1 order-lg-1">
            <h3><i class="bi bi-grid-fill me-2"></i>Category</h3>
            {{- Category := isset(.Queries.category) ? .Queries.category : "artworks" }}
            {{- URL := unfinishedQuery(.QueriesC, "category") }}
            {{- path := slice("artworks", "illustrations", "manga") }}
            {{- name := slice("Artworks", "Illustrations", "Manga") }}
            {{- yield UnderlineNav(baseURL=URL, paths=path, names=name, activeState=.ActiveCategory) }}
          </div>

          <!-- Ratio: Second in small screens, but third in large screens -->
          <div class="col-lg-7 mb-5 order-2 order-lg-3">
            <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>

          <!-- Filter: Third in small screens, but second in large screens -->
          <div class="col-lg-5 mb-5 order-3 order-lg-2">
            <h3><i class="bi bi-funnel-fill me-2"></i>Filter</h3>
            {{- 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>

          <!-- Order: Fourth in both large and small screens -->
          <div class="col-lg-5 mb-5 order-4 order-lg-4">
            <h3><i class="bi bi-sort-down me-2"></i>Order</h3>
            {{- 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) }}
          </div>
        </div>

        <!-- The second row represents Search Mode which is always last -->
        <div class="row">
          <!-- Search Mode: Always last on both large and small screens -->
          <div class="col-lg-12 mb-5 order-5 order-lg-5">
            <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 }}