{{ if ! User.BackgroundImage }}
<div class="user-background-placeholder"></div>
{{ else }}
<div class="user-background">
  <img src="{{ proxyImage(User.BackgroundImage) }}" alt="{{ User.Name }}" />
</div>
{{ end }}
<div class="container">
  <div class="user-page">
    <div class="user-details">
      <img
        src="{{ proxyImage(User.Avatar) }}"
        alt="avatar"
        class="user-avatar"
      />
      <h2 class="user-name">{{ User.Name }}</h2>
      <p class="user-id">
        {{ User.Following }} Following | {{ User.MyPixiv }} MyPixiv
      </p>
      <p class="user-comment">{{ raw: User.Comment }}</p>
    </div>
  </div>
  <div class="switcher">
    <span class="switch-title">Category</span>
    <a href="/users/{{ User.ID }}/artworks#checkpoint" class="switch-button"
      >All</a
    >
    <a
      href="/users/{{ User.ID }}/illustrations#checkpoint"
      class="switch-button"
      >Illustrations</a
    >
    <a href="/users/{{ User.ID }}/manga#checkpoint" class="switch-button"
      >Mangas</a
    >
  </div>
  <div>
    <h1 id="checkpoint">Illustrations and Mangas</h1>

    <div>
      {{ range User.FrequentTags }}
      <a href="/tags/{{ .Name }}">
        <div
          class="tag-container"
          style="background-color: {{ randomColor() }}"
        >
          {{ if ! .TranslatedName }}
          <div class="main">{{ .Name }}</div>
          <div class="sub">#</div>
          {{ else }}
          <div class="main">{{ .TranslatedName }}</div>
          <div class="sub">#{{ .Name }}</div>
          {{ end }}
        </div>
      </a>
      {{ end }}
    </div>

    {{ include "small-tn" User.Artworks }}
  </div>
  <div class="pagination">
    {{ if Page == 1 }}
    <a href="#" class="pagination-button disabled">First</a>
    <a href="#" class="pagination-button disabled">Previous</a>
    {{ else }}
    <a href="/users/{{ User.ID }}?page=1" class="pagination-button">First</a>
    <a
      href="/users/{{ User.ID }}?page={{ dec(Page) }}"
      class="pagination-button"
      >Previous</a
    >
    {{ end }}

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

    {{ if Page == dec(PageLimit) }}
    <a href="#" class="pagination-button disabled">Next</a>
    <a href="#" class="pagination-button disabled">Last</a>
    {{ else }}
    <a
      href="/users/{{ User.ID }}?page={{ inc(Page) }}"
      class="pagination-button"
      >Next</a
    >
    <a
      href="/users/{{ User.ID }}?page={{ dec(PageLimit) }}"
      class="pagination-button"
      >Last</a
    >
    {{ end }}
  </div>
</div>