PixivFE/assets/views/noscript/rankingCalendar.jet.html

<div class="col-12">
  <div class="custom-card bg-charcoal-surface1 p-4 mb-4">
    <h2><i class="bi bi-gear-fill me-2"></i>Ranking options</h2>
    <div class="custom-card-body bg-charcoal-surface1 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>

      {{- Mode := isset(Queries.mode) ? Queries.mode : "daily" }}
      {{- url := "/rankingCalendar?date=" + .ThisMonth.Link + "&mode=" }}
      <div class="row border-bottom border-2 mb-4">
        <div class="col-12">
          <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-4">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>
        </div>
      </div>
    </div>
  </div>
</div>