{{ template "header.html" }}

<div class="container">
  <h2>{{ .Title }}</h2>

  <div class="switcher">
    <span class="switch-title">Content</span>
    <a href="/ranking?content=all&mode={{ .Mode }}&page=1" class="switch-button"
      >Overall</a
    >
    <a
      href="/ranking?content=illust&mode={{ .Mode }}&page=1"
      class="switch-button"
      >Illustrations</a
    >
    <a
      href="/ranking?content=manga&mode={{ .Mode }}&page=1"
      class="switch-button"
      >Mangas</a
    >
  </div>
  <br />

  <div class="switcher">
    <span class="switch-title">Modes</span>
    <a
      href="/ranking?content={{ .Content }}&mode=daily&page=1"
      class="switch-button"
      >Daily</a
    >
    <a
      href="/ranking?content={{ .Content }}&mode=weekly&page=1"
      class="switch-button"
      >Weekly</a
    >
    <a
      href="/ranking?content={{ .Content }}&mode=monthly&page=1"
      class="switch-button"
      >Monthly</a
    >
    <a
      href="/ranking?content={{ .Content }}&mode=rookie&page=1"
      class="switch-button"
      >Rookie</a
    >
    <span class="switch-seperator"></span>
    <a
      href="/ranking?content={{ .Content }}&mode=daily_r18&page=1"
      class="switch-button"
      >Daily (R-18)</a
    >
    <a
      href="/ranking?content={{ .Content }}&mode=weekly_r18&page=1"
      class="switch-button"
      >Weekly (R-18)</a
    >
  </div>
  <br />

  {{ range .Items }}
  <div class="artwork-thumbnail-small artwork-thumbnail">
    <div class="artwork-rank-circle">{{ .Rank }}</div>
    {{ if gt (toInt .Pages) 1 }}
    <div class="artwork-page-count"><span>&boxbox; {{ .Pages }}</span></div>
    {{ end }}
    <a href="/artworks/{{ .ID }}">
      <img
        data-src="{{ proxyImage .Image }}"
        alt="{{ .Title }}"
        class="artwork-master-image lazy"
      />
    </a>

    <a class="artwork-thumbnail-title" href="/artworks/{{ .ID }}">
      <h3 class="no-margin">{{ .Title }}</h3>
    </a>
    <a href="/users/{{ .ArtistID }}" class="artwork-thumbnail-artist flex"
      ><img
        data-src="{{ proxyImage .ArtistAvatar }}"
        alt="{{ .ArtistName }}"
        class="artwork-thumbnail-artist-avatar border-rounded lazy"
      />
      {{ .ArtistName }}</a
    >
  </div>
  {{ end }}

  <div class="pagination">
    {{ if eq .Page 1 }}
    <a href="#" class="pagination-button disabled">First</a>
    <a href="#" class="pagination-button disabled">Previous</a>
    {{ else }}
    <a
      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page=1"
      class="pagination-button"
      >First</a
    >
    <a
      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page={{ dec .Page }}"
      class="pagination-button"
      >Previous</a
    >
    {{ end }}

    <a href="#" class="pagination-button disabled">{{ .Page }}</a>

    {{ if eq .Page 10 }}
    <a href="#" class="pagination-button disabled">Next</a>
    <a href="#" class="pagination-button disabled">Last</a>
    {{ else }}
    <a
      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page={{ inc .Page }}"
      class="pagination-button"
      >Next</a
    >
    <a
      href="/ranking?content={{ .Content }}&mode={{ .Mode }}&page=10"
      class="pagination-button"
      >Last</a
    >
    {{ end }}
  </div>
</div>

{{ template "footer.html" }}