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

{{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}

<div class="d-none">
  <p>Daily</p>
  <p>Weekly</p>
  <p>Monthly</p>
  <p>Rookie</p>
  <p>Daily (R-18)</p>
  <p>Weekly (R-18)</p>
  <p>Weekly (R-18G)</p>
  <p>Original</p>
  <p>Popular among males</p>
  <p>Popular among females</p>
  <p>Popular among males (R-18)</p>
  <p>Popular among females (R-18)</p>
</div>
<div class="row justify-content-center g-4">
  <!-- <h1 class="text-center"><i class="bi bi-calendar me-2"></i>Ranking calendar</h1> -->

  <noscript>
    {{ include "noscript/rankingCalendar" }}
  </noscript>

  <div class="col-12">
    <div class="d-flex align-items-center justify-content-start px-4">
      <h1 class="mb-0 me-3">
        <i class="bi bi-calendar me-2"></i>{{ .ThisMonth.MonthLiteral }} {{.Year}}
      </h1>
      <button class="js-required custom-btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#RankingOptionsModal">
        <i class="bi bi-gear-fill"></i>
      </button>
    </div>

  </div>

  <div class="col-12">

    <div class="custom-card bg-neutral-800 p-4">
      <!-- Navigation buttons -->
      {{- include "fragments/rankingCalendarNav" . }}

      <!-- The ranking calendar itself -->
      <div class="row text-center fw-bold d-none d-lg-flex mb-3">
        <div class="col">Sun</div>
        <div class="col">Mon</div>
        <div class="col">Tue</div>
        <div class="col">Wed</div>
        <div class="col">Thu</div>
        <div class="col">Fri</div>
        <div class="col">Sat</div>
      </div>
      <div class="row row-cols-2 row-cols-md-5 row-cols-lg-7 g-3 mb-3">
        {{ range i, day := .Calendar }}
        <div class="col thumbnail-hover-dark">
          <div class="ratio ratio-1x1">
            <div class="d-flex thumbnail-wrapper bg-neutral-900 rounded overflow-hidden">
              {{ if day.DayNumber > 0 }}
                {{ if day.ImageURL }}
                  <a href="/ranking?date={{ day.DateString }}&mode={{ Mode }}" class="text-decoration-none w-100 h-100 position-relative">
                    <img src="{{ day.ImageURL }}" alt="Day {{ day.DayNumber }}" class="w-100 h-100 object-fit-cover" />
                    <div class="position-absolute top-0 start-0 p-2">
                      <span class="text-white fw-bold bg-dark bg-opacity-75 rounded-pill px-2 py-1">{{ day.DayNumber }}</span>
                    </div>
                  </a>
                {{ else }}
                  <div class="d-flex align-items-center justify-content-center w-100 h-100">
                    <p class="fw-bold mb-0">{{ day.DayNumber }}</p>
                  </div>
                {{ end }}
              {{ end }}
            </div>
          </div>
        </div>
        {{ end }}
      </div>

      <!-- Navigation buttons -->
      {{- include "fragments/rankingCalendarNav" . }}
    </div>

  </div>
</div>

<!-- End of main content -->

<!-- Ranking options modal -->
<div class="modal fade" id="RankingOptionsModal" tabindex="-1" aria-labelledby="RankingOptionsModalLabel" 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-3">
        <h2 class="modal-title" id="RankingOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Ranking 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 border-bottom border-2 mb-4">
          <div class="col-12 mb-4">
            <h3><i class="bi bi-calendar-event me-2"></i>Date picker</h3>
            <form action="/rankingCalendar" method="post">
              <div class="d-inline-flex me-auto">
                <input type="date" id="date" name="date" class="form-control me-3" min="2007-09-01" max="{{.Year}}-{{ .ThisMonth.MonthPadded }}-01" value="{{.Year}}-{{ .ThisMonth.MonthPadded }}-01" />
                <button type="submit" class="custom-btn-secondary">Go</button>
              </div>
            </form>
          </div>
        </div>

        {{- url := "/rankingCalendar?date=" + .ThisMonth.Link + "&mode=" }}
        <div class="row border-bottom border-2 mb-4">
          <div class="col-12 mb-4">
            <h3><i class="bi bi-calendar3 me-2"></i>Time frame</h3>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
              {{- path := slice("daily", "weekly", "monthly", "rookie") }}
              {{- name := slice("Daily", "Weekly", "Monthly", "Rookie")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3">
              {{- path := slice("daily_r18", "weekly_r18", "r18g") }}
              {{- name := slice("Daily (R-18)", "Weekly (R-18)", "R-18G")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <p class="small text-body-secondary mb-0">Choose the time frame for the rankings.</p>
          </div>
        </div>

        <div class="row mb-4">
          <div class="col-12">
            <h3><i class="bi bi-star-fill me-2"></i>Specialized rankings</h3>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="Specialized ranking modes">
              {{- path := slice("original", "male", "female") }}
              {{- name := slice("Original", "Popular among males", "Popular among females")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-between mx-auto mb-3" aria-label="R-18 specialized ranking modes">
              {{- path := slice("male_r18", "female_r18") }}
              {{- name := slice("Popular among males (R-18)", "Popular among females (R-18)")}}
              {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
            </div>
            <p class="small text-muted mb-0">Specialized ranking categories.</p>
          </div>
        </div>

        <div class="row">
          <div class="col-12 d-flex justify-content-between">
            <a href="/rankingCalendar" 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 }}