{{ if ! User.BackgroundImage }}
<div class="background-cover"></div>
{{ else }}
<div class="background-cover" id="hasbg">
  <img src="{{ User.BackgroundImage }}" alt="{{ User.Name }}" />
</div>
{{ end }}
<div class="container user">
  <div class="user-avatar">
    <img src="{{User.Avatar}}" alt="Avatar Of User">
  </div>
  <div class="user-details">
    <h1>{{ User.Name }}</h1>
    <div>
      <a href="https://pixiv.net/u/{{ User.ID }}">pixiv.net/u/{{ User.ID }}</a>
      <br />
    </div>
    <small> {{ User.Following }} Following | {{ User.MyPixiv }} MyPixiv </small>
    <div class="user-social">
      {{ if User.Webpage }}
      <span><a href="{{ User.Webpage }}"><img src="/assets/globe.png" alt="Webpage" /></a></span>
      {{ end }} {{ range index, item := User.Social }}
      <span>
        <a href="{{ item.url }}">
          <img src="/assets/{{ index }}.svg" alt="{{ index }}" />
        </a>
      </span>
      {{ end }}
    </div>
    <p>{{ raw: parsePixivRedirect(User.Comment) }}</p>
  </div>
  <div>Frequently Used Tags</div>
  <div class="user-tags">
    {{ range User.FrequentTags }}
    <a href="/tags/{{ .Name }}">
      #{{ .Name }}
      {* <div>
        {{ if ! .TranslatedName }}
        <div class="main">{{ .Name }}</div>
        {{ else }}
        <div class="main">{{ .TranslatedName }}</div>
        <div class="sub">#{{ .Name }}</div>
        {{ end }}
      </div> *}
    </a>
    {{ end }}
  </div>
  <div class="switcher">
    <div class="switch-title">Category</div>
    <a href="/users/{{ User.ID }}/#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>
    <a href="/users/{{ User.ID }}/novels#checkpoint" class="switch-button">Novels</a>
    <a href="/users/{{ User.ID }}/bookmarks#checkpoint" class="switch-button">Bookmarks</a>
  </div>
  <div>
    {{ if Category != "novels" }}
    <div class="artwork-container-header">
      <h2 id="checkpoint">Illustrations and Mangas</h2>
      {{ combinedUrl := "/artworks-multi/" + joinArtworkIds(User.Artworks) }}
      <div class="artwork-actions"><a href="{{combinedUrl}}">View all art on this page</a></div>
    </div>
    <div class="artwork-container">
      {{ include "components/small-tn" User.Artworks }}
    </div>
    {{ else }}

    <div class="artwork-container-header">
      <h2 id="checkpoint">Novels</h2>
    </div>
    <div class="novel-container">
      {{ range User.Novels }}
      {{ include "components/novel-tn" . }}
      {{ end }}
    </div>
    {{ end }}
  </div>
  <div class="pagination">
    {{ url := "/users/" + User.ID + "/" + Category + "?page="}}
    <small>Page {{ Page }}/{{ PageLimit }}</small>
    <br />
    {{ raw: createPaginator(url, "#checkpoint", Page, PageLimit) }}
  </div>
</div>