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

<div class="d-none">
  <p>All</p>
  <p>R-18</p>
</div>

{* g-5 causes the page layout to go slightly off-screen on small devices *}
<div class="row justify-content-center g-4">

  {*
  {{ if CookieList["pixivfe-LogoStyle"] == "" || CookieList["pixivfe-LogoStyle"] == "standard" }}
  <h1 class="display-6 fw-semibold text-center">PixivFE</h1>
  <span class="text-center text-body-secondary mt-0">An open-source alternative frontend for Pixiv that doesn't suck.</span>
  {{- else if CookieList["pixivfe-LogoStyle"] == "alternative" }}
  <div class="d-flex justify-content-center">
    <img src="/img/logo-alt.gif" alt="PixivFE icon" width="273" height="90" />
  </div>
  <span class="text-center text-body-secondary mt-0">An open-source alternative frontend for Pixiv that doesn't suck.</span>
  {{- end }}
  *}

  <!-- If the user is not logged in, only show the following non-personalised content -->
  <!-- NOTE: the lack of the mode switcher for !.LoggedIn is intentional -->

  {{- if !.LoggedIn }}
  <div class="alert alert-light w-auto" role="alert">
    <p class="text-center mb-0"><i class="bi bi-person-circle me-2"></i>You are not logged in. You can log in on the <a href="/settings" class="alert-link">settings page</a>.
    </p>
  </div>

  <!-- Today's illustration rankings -->
  <div class="col-12">
    <h2>Today's illustration rankings</h2>

    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {* NOTE: we only render 48 items here to avoid a newline at the end with only two items *}
      {{- include "fragments/ranking-tn" (.Data.Rankings.Contents[:48]) }}
    </div>

    <div class="d-flex mt-3">
      <a href="/ranking" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <!-- pixivision content -->
  <div class="col-12">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
      <h2 class="mb-3 mb-md-0">Newest articles on pixivision</h2>
      <a href="/pixivision" class="custom-btn-secondary">View more</a>
    </div>

    <div class="overflow-scroll" id="horizontal-scroll">
      <div class="row flex-nowrap">
        {{- range .Data.Pixivision }}
        {* TODO: make the entire pixivision card clickable while preserving the text underline effect *}
        {* NOTE: intentionally choosing indivisible col widths to create a visible affordance *}
        <div class="col-11 col-md-9 col-lg-5 position-relative">
          <div class="custom-card bg-charcoal-surface1 thumbnail-hover-dark">
            <a href="/pixivision/a/{{.ID}}">
              <div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
                <img src="{{.Thumbnail}}" class="card-img-top rounded-top-5" alt="{{.Title}}" />
              </div>
            </a>
            <div class="custom-card-body">
              <!-- Title -->
              <h4 class="text-center lh-lg mb-0">
                <a href="/pixivision/a/{{.ID}}" class="text-body text-decoration-none">{{.Title}} </a>
              </h4>
            </div>
          </div>
        </div>
        {{- end }}
      </div>
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <div class="col-12">
    <h2>Newest works</h2>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .Data.Newest }}
    </div>
  </div>

  {{- else }}

  <!-- Otherwise, the user is logged in, show the full landing page -->

  <!-- Mode switcher -->
  <div class="col-12">
    <div class="d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-md-end mx-auto">
      {{- Mode := isset(Queries.mode) ? Queries.mode : "all" }}
      {{- url := replaceQuery(.Queries, "mode", "") }}
      {{- path := slice("all", "r18") }}
      {{- name := slice("All", "R-18")}}
      {{- yield UnderlineNav(baseURL=url, paths=path, names=name, activeState=Mode)}}
    </div>
  </div>

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

  <div class="col-12 mt-3">
    <h2>Latest works by followed</h2>
    {{- if len(.Data.Following) > 0 }}
      <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
        {{- include "fragments/small-tn" .Data.Following }}
      </div>
      <div class="d-flex mt-3">
        <a href="/self/followingWorks" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
      </div>
      {{- else }}
      <div class="alert alert-light w-auto" role="alert">
        <p class="text-center mb-0">Nothing here yet&#8212;find a user to follow!</p>
      </div>
    {{- end }}
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <div class="col-12">
    <h2>Recommended works</h2>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .Data.Recommended }}
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <!-- Recommended users -->
  <div class="col-12">
    <h2>Recommended users</h2>

    <div class="row g-4">
      {{- range .Data.RecommendUser }}
        <div class="col-12 col-lg-6">
          <div class="d-block h-100 bg-neutral-800 rounded-5 drop-shadow p-4">
            <div class="row g-3 mb-4">
              {* NOTE: the col element needs to wrap the ratio element for whatever reason *}
              <div class="col-2">
                <div class="ratio ratio-1x1">
                  <a
                    href="/users/{{ .ID }}"
                    title="{{ .Name }}"
                  >
                    <img src="{{ .Avatar }}" alt="User avatar" class="h-100 w-100 img-fluid rounded-circle object-fit-cover">
                  </a>
                </div>
              </div>

              <div class="col-10">
                <h3 class="mb-0">
                  <a
                    href="/users/{{ .ID }}"
                    title="{{ .Name }}"
                    class="text-body"
                  >
                    {{ .Name }}
                  </a>
                </h3>

                {{- if .Comment }}
                <p class="text-body-secondary line-clamp-1 w-100 mt-2 mb-0">
                  <small>{{ raw: parsePixivRedirect(.Comment) }}</small>
                </p>
                {{- end }}

                <div class="mt-3">
                  {{- include "fragments/followButtons" . }}
                </div>

                <div id="horizontal-scroll" class="row flex-nowrap overflow-scroll g-3 pb-2 mt-3">
                  {{- range .Artworks }}
                  <div class="col-7 col-md-4">
                    <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 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      {{- end }}
    </div>

    <div class="d-flex mt-3">
      <a href="/discovery/users" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <!-- Popular tags -->
  <div class="col-12">
    <h2>Popular tags</h2>

    <div class="row g-4">
      {{- range .Data.PopularTag }}
        <div class="col-12 col-lg-6">
          <div class="d-block h-100 bg-neutral-800 rounded-5 drop-shadow p-4">
            <div class="row g-3 mb-4">
              {* NOTE: the col element needs to wrap the ratio element for whatever reason *}
              <div class="col-10">
                <h3 class="mb-0">
                  <a
                    href="/tags/{{ .Name }}"
                    title="{{ .Name }}"
                    class="text-body"
                  >
                    #{{ .Name }}
                  </a>
                </h3>

                {{- if .TrendingRate > 0 }}
                <p class="text-body-secondary line-clamp-1 w-100 mt-2 mb-0">
                  <small>Trending!</small>
                </p>
                {{- end }}

                <div id="horizontal-scroll" class="row flex-nowrap overflow-scroll g-3 pb-2 mt-3">
                  {{- range .Artworks }}
                  <div class="col-7 col-md-4">
                    <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 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      {{- end }}
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <!-- Today's illustration rankings -->
  <div class="col-12">
    <h2>Today's illustration rankings</h2>

    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/ranking-tn" (.Data.Rankings.Contents[:12]) }}
    </div>

    <div class="d-flex mt-3">
      <a href="/ranking" class="custom-btn-secondary bg-charcoal-surface2 mx-auto">View more</a>
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <!-- pixivision content -->
  <div class="col-12">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
      <h2 class="mb-3 mb-md-0">Newest articles on pixivision</h2>
      <a href="/pixivision" class="custom-btn-secondary">View more</a>
    </div>

    <div class="overflow-scroll" id="horizontal-scroll">
      <div class="row flex-nowrap">
        {{- range .Data.Pixivision }}
        {* TODO: make the entire pixivision card clickable while preserving the text underline effect *}
        {* NOTE: intentionally choosing indivisible col widths to create a visible affordance *}
        <div class="col-11 col-md-9 col-lg-5">
          <div class="custom-card bg-charcoal-surface1 thumbnail-hover-dark">
            <a href="/pixivision/a/{{.ID}}">
              <div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
                <img src="{{.Thumbnail}}" class="card-img-top rounded-top-5" alt="{{.Title}}" />
              </div>
            </a>
            <div class="custom-card-body">
              <!-- Title -->
              <h4 class="text-center lh-lg mb-0">
                <a href="/pixivision/a/{{.ID}}" class="text-body text-decoration-none">{{.Title}} </a>
              </h4>
            </div>
          </div>
        </div>
        {{- end }}
      </div>
    </div>
  </div>

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <!-- Recommended works by tag -->
  {{- range .Data.RecommendByTags }}
  <div class="col-12">
    <h2>Recommended illustrations tagged <a href="/tags/{{ .Name }}" class="text-decoration-none">#{{ .Name }}</a></h2>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .Artworks }}
    </div>
  </div>
  {{- end }}

  <hr class="border-neutral-700 opacity-100 rounded mt-5 mb-0">

  <div class="col-12">
    <h2>Newest works</h2>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
      {{- include "fragments/small-tn" .Data.Newest }}
    </div>
  </div>

{{- end }}
</div>
{{- end }}