{{- extends "layout/default" }}
{{- import "blocks/pagination" }}
{{- import "blocks/underlinenavUser" }}
{{- import "blocks/underlinenav" }}
{{- block body() }}

<div class="d-none">
  <p>Home</p>
  <p>Illustrations</p>
  <p>Manga</p>
  <p>Novels</p>
  <p>Bookmarks</p>
</div>
<div class="row justify-content-center g-4">
  <div class="col-12 col-lg-9 mb-4">
    <div class="custom-card bg-charcoal-surface1">
      <!-- Profile background image -->
      {{- if .User.BackgroundImage }}
      <div class="d-flex position-relative mb-5 mb-md-0">
        <img src="{{ .User.BackgroundImage }}" alt="{{ .User.Name }} profile background image"
             class="img-fluid rounded-top-5 object-fit-cover w-100"
             style="max-height: 200px;"
             width="1920px"
             height="960px"
        />
        <img src="{{.User.Avatar}}" alt="User avatar"
             class="d-inline-block d-md-none border border-5 border-neutral-800 rounded-circle object-fit-cover position-absolute z-1"
             style="width: 150px; height: 150px; bottom: 0; left: 50%; transform: translate(-50%, 50%);">
      </div>
      {{- end }}

      <div class="custom-card-body p-4 mt-md-0">
        {{- if !.User.BackgroundImage }}
        <img src="{{.User.Avatar}}" alt="User avatar"
                   class="d-flex d-md-none border border-5 border-neutral-800 rounded-circle object-fit-cover mx-auto"
                   style="width: 150px; height: 150px">
        {{- end }}

        <div class="row g-4 mt-3 mt-md-0">
          <!-- User avatar and external link to pixiv.net -->
          <div class="col-12 col-md-3 d-none d-md-block mt-0">
            <div class="d-flex flex-column align-items-center">
              <img src="{{.User.Avatar}}" alt="User avatar" class="rounded-circle object-fit-cover mb-3" style="width: 150px; height: 150px">

              <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 mb-3">
                <small class="text-center">
                  <i class="bi bi-box-arrow-up-right me-1"></i>
                  <a href="https://pixiv.net/u/{{ .User.ID }}" class="text-body-secondary fw-semibold">
                    View on pixiv.net
                  </a>
                </small>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-9 mt-0">
            <!-- User name and follow/unfollow buttons -->
            <div class="d-flex flex-column flex-md-row flex-wrap justify-content-xl-between align-items-center mb-3 mb-md-2">
              <h1 class="flex-grow-1 mb-2 mb-md-0">{{ .User.Name }}</h1>
              <p class="d-inline-block d-md-none text-body-secondary text-center">{{ .User.Following }} Following | {{ .User.MyPixiv }} MyPixiv</p>
              {{- include "fragments/followButtons" .User }}
            </div>

            <!-- Social media links -->
            <p class="d-none d-md-inline-block text-body-secondary text-md-start">{{ .User.Following }} Following | {{ .User.MyPixiv }} MyPixiv</p>
            <div class="d-flex justify-content-center justify-content-md-start mb-3">
              {{- if .User.Webpage }}
              <a href="{{ .User.Webpage }}" class="btn border-custom-color border-2 text-body rounded-pill me-2">
                <i class="bi bi-globe"></i>
              </a>
              {{- end }}
              {{- range index, item := .User.Social }}
                {{- if index == "pawoo" }}
                <a href="{{ item.url }}" class="btn border-custom-color border-2 text-body rounded-pill me-2">
                  <i class="bi bi-mastodon"></i>
                </a>
                {{- else }}
                <a href="{{ item.url }}" class="btn border-custom-color border-2 text-body rounded-pill me-2">
                  <i class="bi bi-{{ index }}"></i>
                </a>
                {{- end }}
              {{- end }}
            </div>

            {* NOTE: this button definitely needs to be in a different place *}
            <div class="d-inline-flex d-md-none border border-neutral-700 rounded py-1 px-2 mb-3">
              <small>
                <i class="bi bi-box-arrow-up-right me-1"></i>
                <a href="https://pixiv.net/u/{{ .User.ID }}" class="text-body-secondary fw-semibold stretched-link">
                  View on pixiv.net
                </a>
              </small>
            </div>

            <!-- User bio and frequently used tags -->
            <p class="mb-0">{{ raw: parsePixivRedirect(.User.Comment) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12" id="checkpoint">
    <!-- Navigation -->
    <div class="d-flex flex-column flex-md-row align-items-start justify-content-center justify-content-md-between mx-auto">
      {* Using an empty fragment identifier so that htmx preserves the page position *}
      {{- baseURL := "/users/" + .User.ID + "/" }}
      {{- paths := slice("" + "#", "illustrations" + "#", "manga" + "#", "novels" + "#", "bookmarks" + "#") }}
      {{- names := slice("Home", "Illustrations", "Manga", "Novels", "Bookmarks") }}
      {{- categoryCounts := slice(1, .User.Categories.illustrations.WorkCount, .User.Categories.manga.WorkCount, .User.Categories.novels.WorkCount, .User.Categories.bookmarks.WorkCount) }}
      {{- yield UnderlineNavUser(baseURL=baseURL, paths=paths, names=names, categoryCounts=categoryCounts, activeState=.Category.Value + "#") }}

      {*
      NOTE: these filters technically work but are disabled due to issues with pagination and work counts

      {{- Mode := isset(Queries.mode) ? Queries.mode : "all" }}
      {{- url := replaceQuery(.Queries, "mode", "") }}
      {{- path := slice("all", "safe") }}
      {{- name := slice("All", "Safe")}}
      {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
      <div class="d-none">
        <p>All</p>
        <p>Safe</p>
      </div>
      *}
    </div>

    <hr class="border-neutral-800 opacity-100 rounded mt-0 mb-3">

    <!-- User content -->

    <!-- Home category (all works) -->
    {{- if .Category.Value == "" || .Category.Value == "artworks" }}

      {*
      <div class="d-flex justify-content-between align-items-center mb-4">
        <!-- NOTE: using sentence case here to be more consistent with the rest of our UI, even though pixiv uses title case -->
        <h2 class="d-flex align-items-end mb-0">Works<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.WorkCounts.All }}</span></h2>
      </div>
      *}

      {* Initialize a flag to track the first rendered group *}
      {{- isFirstGroup := true }}

      <!-- Illustrations -->
      {{ if len(.User.Categories.illustrations.IllustWorks) != 0 }}
        {{- if not isFirstGroup }}
          <hr class="my-4">
        {{- end }}
        <h2 class="d-flex align-items-end">Illustrations<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.illustrations.WorkCount }}</span></h2>

        <div class="d-flex flex-nowrap overflow-scroll mb-3">
          {{- range .User.Categories.illustrations.FrequentTags }}
            <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
              <small class="d-flex flex-column align-items-center">
                <span>
                  <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
                </span>
                {{- if .TranslatedName }}
                <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
                {{- end }}
              </small>
            </div>
          {{- end }}
        </div>

        <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
          {{- include "fragments/small-tn" .User.Categories.illustrations.IllustWorks }}
        </div>

        {* TODO: use a better check than this *}
        {{ if len(.User.Categories.illustrations.IllustWorks) > 29 }}
        <div class="d-flex mt-3">
          <a href="{{ .User.ID + "/illustrations" + "?page=2#checkpoint" }}" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
        </div>
        {{- end }}

        {* After rendering Illustrations, set isFirstGroup to false *}
        {{- isFirstGroup = false }}
      {{- end }}

      <!-- Manga -->
      {{ if len(.User.Categories.manga.IllustWorks) != 0 }}
        {{- if not isFirstGroup }}
          <hr class="my-4">
        {{- end }}
        <h2 class="d-flex align-items-end">Manga<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.manga.WorkCount }}</span></h2>

        <div class="d-flex flex-nowrap overflow-scroll mb-3">
          {{- range .User.Categories.manga.FrequentTags }}
            <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
              <small class="d-flex flex-column align-items-center">
                <span>
                  <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
                </span>
                {{- if .TranslatedName }}
                <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
                {{- end }}
              </small>
            </div>
          {{- end }}
        </div>

        {{- if len(.User.Categories.manga.MangaSeries) != 0 }}
        <div class="overflow-scroll mb-4" id="horizontal-scroll">
          <div class="row flex-nowrap">
            {{- range .User.Categories.manga.MangaSeries }}
              {{- include "fragments/mangaseries-tn" .  }}
            {{- end }}
          </div>
        </div>
        {{- end }}

        <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
          {{- include "fragments/small-tn" .User.Categories.manga.IllustWorks }}
        </div>

        {{ if len(.User.Categories.manga.IllustWorks) > 29 }}
          <div class="d-flex mt-3">
            <a href="{{ .User.ID + "/manga" + "?page=2#checkpoint" }}" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
          </div>
        {{- end }}

        {{- isFirstGroup = false }}
      {{- end }}

      <!-- Novels -->
      {{ if len(.User.Categories.novels.NovelWorks) != 0 }}
        {{- if not isFirstGroup }}
          <hr class="my-4">
        {{- end }}
        <h2 class="d-flex align-items-end">Novels<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.novels.WorkCount }}</span></h2>

        <div class="d-flex flex-nowrap overflow-scroll mb-3">
          {{- range .User.Categories.novels.FrequentTags }}
            <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
              <small class="d-flex flex-column align-items-center">
                <span>
                  <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
                </span>
                {{- if .TranslatedName }}
                <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
                {{- end }}
              </small>
            </div>
          {{- end }}
        </div>

        {{- if len(.User.Categories.novels.NovelSeries) != 0 }}
        <div class="overflow-scroll mb-4" id="horizontal-scroll">
          <div class="row flex-nowrap">
            {{- range .User.Categories.novels.NovelSeries }}
              {{- include "fragments/novelseries-tn" .  }}
            {{- end }}
          </div>
        </div>
        {{- end }}

        <div class="row row-cols-1 row-cols-lg-2 g-4">
          {{- range .User.Categories.novels.NovelWorks }}
          <div class="col mt-1">
            <div class="custom-novel-card bg-transparent p-3 py-4 thumbnail-hover-dark">
              {{- include "fragments/novel-tn" .  }}
            </div>
            <hr class="my-0">
          </div>
          {{- end }}
        </div>

        {{ if len(.User.Categories.novels.NovelWorks) > 29 }}
          <div class="d-flex mt-3">
            <a href="{{ .User.ID + "/novels" + "?page=2#checkpoint" }}" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
          </div>
        {{- end }}

        {{- isFirstGroup = false }}
      {{- end }}

    {{- end }}

    <!-- Illustrations category -->
    {{- if .Category.Value == "illustrations" }}
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="d-flex align-items-end mb-0">Illustrations<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.illustrations.WorkCount }}</span></h2>
    </div>

    <div class="d-flex flex-nowrap overflow-scroll mb-3">
      {{- range .User.Categories.illustrations.FrequentTags }}
        <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
          <small class="d-flex flex-column align-items-center">
            <span>
              <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
            </span>
            {{- if .TranslatedName }}
            <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
            {{- end }}
          </small>
        </div>
      {{- end }}
    </div>

    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .User.Categories.illustrations.IllustWorks }}
    </div>
    {{- end }}

    <!-- Manga category -->
    {{- if .Category.Value == "manga" }}
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="d-flex align-items-end mb-0">Manga<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.manga.WorkCount }}</span></h2>
      {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.User.Categories.manga.IllustWorks) }}
      <!-- <a href="{{combinedUrl}}" class="custom-btn-secondary">View all</a> -->
    </div>

    <div class="d-flex flex-nowrap overflow-scroll mb-3">
      {{- range .User.Categories.manga.FrequentTags }}
        <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
          <small class="d-flex flex-column align-items-center">
            <span>
              <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
            </span>
            {{- if .TranslatedName }}
            <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
            {{- end }}
          </small>
        </div>
      {{- end }}
    </div>

    {{- if len(.User.Categories.manga.MangaSeries) != 0 }}
    <div class="overflow-scroll mb-4" id="horizontal-scroll">
      <div class="row flex-nowrap">
        {{- range .User.Categories.manga.MangaSeries }}
          {{- include "fragments/mangaseries-tn" .  }}
        {{- end }}
      </div>
    </div>
    {{- end }}

    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .User.Categories.manga.IllustWorks }}
    </div>
    {{- end }}

    <!-- Novels category -->
    {{- if .Category.Value == "novels" }}
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="d-flex align-items-end mb-0">Novels<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.novels.WorkCount}}</span></h2>
    </div>

    <div class="d-flex flex-nowrap overflow-scroll mb-3">
      {{- range .User.Categories.novels.FrequentTags }}
        <div class="bg-charcoal-surface1 rounded px-3 py-2 me-2 mb-2 w-auto">
          <small class="d-flex flex-column align-items-center">
            <span>
              <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-nowrap">#{{ .Name }}</a>
            </span>
            {{- if .TranslatedName }}
            <small class="text-body-secondary fw-medium text-nowrap">({{ .TranslatedName }})</small>
            {{- end }}
          </small>
        </div>
      {{- end }}
    </div>

    <div class="row row-cols-1 row-cols-lg-2 g-4">
      {{- range .User.Categories.novels.NovelWorks }}
      <div class="col mt-1">
        <div class="custom-novel-card bg-transparent p-3 py-4 thumbnail-hover-dark">
          {{- include "fragments/novel-tn" . }}
        </div>
        <hr class="my-0">
      </div>
      {{- end }}
    </div>
    {{- end }}

    <!-- Bookmarks category -->
    {{- if .Category.Value == "bookmarks" }}
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h2 class="d-flex align-items-end mb-0">Bookmarks<span class="fs-6 bg-charcoal-surface1 rounded px-2 py-1 ms-2">{{ .User.Categories.bookmarks.WorkCount }}</span></h2>
    </div>
    {* NOTE: using .User.Artworks since there's no need to create a separate bookmarks slice; the category handles it *}
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .User.Categories.bookmarks.IllustWorks }}
    </div>
    {{- end }}

  </div>

  <!-- Pagination -->
  {* TODO: figure out how to 'paginate' the home tab correctly; htmx for swapping in categories? *}
  {{- if .Category.Value == "illustrations" || .Category.Value == "manga" || .Category.Value == "novels" || .Category.Value == "bookmarks" }}
    {{- url := "/users/" + .User.ID + "/" + .Category.Value + "?page="}}
    {{- paginationData := createPaginator(url, "#checkpoint", .Page, .Category.PageLimit, 1, 5) }}
    {{- yield pagination(data=paginationData) }}
  {{- end }}
</div>
{{- end }}