<div class="container">
  <h1>{{ Title }}</h1>

  <div class="switcher">
    {{ url := "" }}
    {{ if Mode == "original" || Mode == "male" || Mode == "Female" }}
    {{ url = "/ranking?date=" + Data.CurrentDate +
    "&page=1&content=" }}
    {{ else }}
    {{ url = "/ranking?mode=" + Mode + "&date=" + Data.CurrentDate +
    "&page=1&content=" }}
    {{ end }}
    <div class="switch-title">Content (current: {{ Content }})</div>
    <a href="{{ url }}all" class="switch-button">Overall</a>
    <a href="{{ url }}illust" class="switch-button">Illustrations</a>
    <a href="{{ url }}manga" class="switch-button">Mangas</a>
    <a href="{{ url }}ugoira" class="switch-button">Ugoira</a>
  </div>
  <br />

  <div class="switcher">
    {{ url := "/ranking?content=" + Content +"&date=" + Data.CurrentDate
    + "&page=1&mode=" }}
    <div class="switch-title">Modes (current: {{ Mode }})</div>
    <a href="{{ url }}daily" class="switch-button">Daily</a>
    <a href="{{ url }}weekly" class="switch-button">Weekly</a>
    {{ if Content != "ugoira" }}
    <a href="{{ url }}monthly" class="switch-button">Monthly</a>
    <a href="{{ url }}rookie" class="switch-button">Rookie</a>
    {{ end }}

    <span class="switch-seperator"></span>
    <a href="{{ url }}daily_r18" class="switch-button">Daily (R-18)</a>
    <a href="{{ url }}weekly_r18" class="switch-button">Weekly (R-18)</a>
    <br />
    {{ if Content == "all" }}
    <a href="{{ url }}original" class="switch-button">Original</a>
    <a href="{{ url }}male" class="switch-button">Popular among males</a>
    <a href="{{ url }}female" class="switch-button">Popular among females</a>
    {{ end }}
  </div>
  <br />

  <div class="switcher">
    {{ url := "/ranking?content=" + Content + "&mode=" + Mode +
    "&page=1" }}
    <div class="switch-title">Date (current: {{ Data.CurrentDate }})</div>
    {{ if Data.PrevDate != "false" }}
    <a href="{{ url }}&date={{Data.PrevDate}}" class="switch-button"
      >Yesterday</a
    >
    {{ end }} {{ if Data.NextDate != "false" }}
    <a href="{{ url }}&date={{Data.NextDate}}" class="switch-button"
      >Next day</a
    >
    {{ end }}
    <a href="{{ url }}" class="switch-button">Latest</a>
    <span class="switch-seperator"></span>
    <a href="/rankingCalendar">Ranking calendar</a>
  </div>
  <br />

  <div class="artwork-container">
    {{ include "components/ranking-tn" Data.Contents }}
  </div>

  <div class="pagination">
    {{ url := "/ranking?content=" + Content +"&date=" + Data.CurrentDate
    + "&mode=" + Mode + "&page=" }}
    <small>Page {{ Page }}/{{ PageLimit }}</small>
    <br />
    {{ raw: createPaginator(url, "#checkpoint", Page, PageLimit) }}
  </div>
</div>
