{{- extends "layout/default" }}
{{- import "blocks/comments" }}
{{- block body() }}

<!-- Prefetch links -->
<link rel="prefetch" href="/users/{{ .Illust.User.ID }}" />

<div class="row justify-content-center g-4">
  <!-- col-lg-9 to ensure that artworks don't take forever to scroll past, especially if there are multiple, but col-12 to display artworks at full width on small devices -->
  <div class="col-12 col-lg-9">
    <!-- The artwork fragment -->
    {{- include "fragments/artwork" .Illust }}
  </div>

  <div class="col-12 col-lg-11">
    <div class="row g-4">
      <!-- Recent works by artist -->
      <div class="col-12 col-lg-6">
        <div class="custom-card bg-charcoal-surface1 py-3 px-4 mb-3">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center me-3">
              <a href="/users/{{ .Illust.User.ID }}">
                <img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle object-fit-cover me-3" style="width: 48px; height: 48px" />
              </a>
              <a href="/users/{{ .Illust.User.ID }}" class="text-body">
                <h2 class="m-0">{{ .Illust.User.Name }}</h2>
              </a>
            </div>
            {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
            <div class="d-inline-flex flex-shrink-0 border border-neutral-700 rounded py-1 px-2">
              <small class="text-center">
                <a href="{{ combinedUrl }}" class="text-body-secondary fw-semibold"> View all </a>
              </small>
            </div>
          </div>
        </div>
        <div id="horizontal-scroll" class="row flex-nowrap flex-lg-wrap overflow-scroll overflow-lg-visible px-4 g-3">
          {* we only render 19 items if there are 20 RecentWorks to avoid a newline with only the "View more" button on large devices *}
          {* col-7 is used for each RecentWorks item to create a visible affordance *}
          {{- if len(.Illust.RecentWorks) == 20 }}
            {{- range .Illust.RecentWorks[:19] }}
            <div class="col-7 col-md-4 col-xl-3">
              <div class="card h-100 border-0 bg-transparent">
                {{ include "fragments/thumbnail-dt" . }}
                <div class="card-body p-0">{{ include "fragments/thumbnail-tt" . }}</div>
              </div>
            </div>
            {{- end }}
          {{- else }}
            {{- range .Illust.RecentWorks }}
            <div class="col-7 col-md-4 col-xl-3">
              <div class="card h-100 border-0 bg-transparent">
                {{ include "fragments/thumbnail-dt" . }}
                <div class="card-body p-0">{{ include "fragments/thumbnail-tt" . }}</div>
              </div>
            </div>
            {{- end }}
          {{- end }}
          {* View more button *}
          {* TODO: add hover effect for this element *}
          <div class="col-7 col-md-4 col-xl-3">
            <div class="card h-100 border-0 bg-transparent">
              <div class="position-relative h-100 thumbnail-hover-dark mb-2">
                <div>
                  {* NOTE: the lack of #checkpoint is intentional; we need to orient the user once they land on the user page for the first time *}
                  <a href="/users/{{ .Illust.User.ID }}/illustrations">
                    <div class="ratio ratio-1x1">
                      <div class="rounded d-flex flex-column align-items-center justify-content-center w-100 h-100 bg-neutral-800 text-white">
                        <i class="bi bi-three-dots text-white fs-2"></i>
                        View more
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comments section -->
      {{- yield Comments(data=.Illust, contentType="illust") }}
    </div>
  </div>

  {{- if len(.Illust.RelatedWorks) > 0 }}
  <div class="col-12 mt-5">
    <h2>Related works</h2>
    <!-- Gradually increase the number of artworks shown per row along with device width -->
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .Illust.RelatedWorks }}
    </div>
  </div>
  {{- end }}
</div>
{{- end }}