{{ template "header.html" }}
<div class="container">
  <h1>Recommended works</h1>

  {{ template "scrollable-container.html" .Recommended }}

  <h1>Today's rankings</h1>
  <div class="thumbnail-container">
    {{ range $i, $_ := .Rankings }}
    <div class="artwork-thumbnail-large artwork-thumbnail">
      <div class="artwork-rank-circle">{{ $i | inc}}</div>
      <a href="#">
        <img
          src="{{ (index .Images 0).Small }}"
          alt="{{ .Title }}"
          class="artwork-master-image"
        />
      </a>

      <h3 class="artwork-thumbnail-title no-margin">{{ .Title }}</h3>
      <a href="#" class="artwork-thumbnail-artist flex"
        ><img
          src="{{ .Artist.Avatar.medium }}"
          alt="{{ .Artist.Name }}"
          class="artwork-thumbnail-artist-avatar border-rounded"
        />
        {{ .Artist.Name }}</a
      >
    </div>
    {{ end }}
  </div>

  <h1>Pixivision</h1>
  <div class="thumbnail-container">
    {{ range .Spotlights }}
    <a href="{{ .URL }}" class="spotlight-thumbnail">
      <img
        src="{{ .Thumbnail }}"
        alt="{{ .Title }}"
        class="spotlight-master-image"
      />
      <div class="spotlight-title-wrapper">
        <h2 class="spotlight-title">{{ .Title }}</h2>
      </div>
    </a>
    {{ end }}
  </div>

  <h1>Newest by all</h1>
  {{ template "thumbnail-container.html" .Newest }}
</div>
{{ template "footer.html" }}