{{ if !.IsUgoira }}
<div class="illust-images">
  {{ range index := .Images }}
  <a href="{{ .Original }}" target="_blank">
    {{ if .Width != 0 && .Height != 0 }}
    {* todo: do not reflow the page because of loading image *}
    <img src="{{ .Large }}" alt="Page {{ index }}" data-width="{{.Width}}" data-height="{{.Height}}" />
    {{ else }}
    <img src="{{ .Large }}" alt="Page {{ index }}" />
    {{ end }}
  </a>
  {{ end }}
</div>
{{ else }}
<div class="illust-images">
  <video autoplay loop muted disablepictureinpicture playsinline controls poster="{{ .Images[0].Large }}"
    src="/proxy/ugoira.com/{{ .ID }}">
    Unable to load ugoira.
  </video>
</div>
<a href="/proxy/ugoira.com/{{ .ID }}">Download</a>
<br />
<a href="https://ugoira.com/i/{{ .ID }}">Go to ugoira.com for more options</a>
{{ end }}

<div class="illust-attr">
  <div class="illust-author-attr">
    <a href="/users/{{ .User.ID }}"><img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="illust-avatar" />
    </a>
    <div class="attr-wrap">
      <div class="illust-title">{{ .Title }}</div>
      <div class="illust-author">
        <a href="/users/{{ .User.ID }}">{{ .User.Name }}</a>
      </div>
    </div>
  </div>
  <div class="artwork-actions">
    {{ if isset(.BookmarkData) && LoggedIn }}
    <a href="/self/deleteBookmark/{{ .BookmarkID }}?r={{ OriginalURL }}">
      <img src="/assets/heart-red.png" alt="Bookmarked" />
    </a>
    {{ else }}
    <a href="/self/addBookmark/{{ .ID }}?r={{ OriginalURL }}">
      <img src="/assets/heart-outline.png" alt="Bookmark" />
    </a>
    {{ end }}

    {{ if .Liked && LoggedIn}}
    <img src="/assets/like-blue.png" alt="Liked" />

    {{ else }}
    <a href="/self/like/{{ .ID }}?r={{ OriginalURL }}">
      <img src="/assets/like-outline.png" alt="Like" />
    </a>
    {{ end }}
  </div>
</div>

<div>
  <a href="https://pixiv.net/i/{{ .ID }}">pixiv.net/i/{{ .ID }}</a>
  <br />
</div>
<div class="illust-tags">
  <span class="illust-tag-attr">
    <img src="/assets/eye.png" alt="Views" />
    {{ .Views }}
  </span>
  <span class="illust-tag-attr">
    <img src="/assets/heart-solid.png" alt="Bookmarks" />
    {{ .Bookmarks }}
  </span>
  <span class="illust-tag-attr">
    <img src="/assets/like.png" alt="Likes" />
    {{ .Likes }}
  </span>
  <span class="illust-tag-attr">
    <img src="/assets/calendar.png" alt="Date" />
    {{ parseTime: .Date }}
  </span>
</div>

<div class="illust-tags">
  {{ if .AiType == 2 }}
  <span class="illust-tag">
    <span class="illust-tag-name" id="highlight">AI-generated</span>
  </span>
  {{ end }} {{ range .Tags }} {{ if isEmphasize(.Name) }}
  <span class="illust-tag">
    <span class="illust-tag-name" id="highlight">{{ .Name }}</span>
  </span>
  {{ else }}
  <span class="illust-tag">
    <span class="illust-tag-name"><a href="/tags/{{ escapeString(.Name) }}">#{{ .Name }}</a></span><span
      class="illust-tag-translation">{{ .TranslatedName }}</span>
  </span>
  {{ end }} {{ end }}
</div>
<br />
<div class="illust-description">
  {{ raw: parsePixivRedirect(.Description) }}
</div>
<br />