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

{* TODO: replicate the styling used here for the novel series page *}

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

{{- baseURL := "/users/" + .User.ID }}

<div class="row justify-content-center g-4">
  {* col-auto! *}
  <div class="col-12 col-lg-auto">
    <div class="custom-card">
      <div class="custom-card-body bg-charcoal-surface1 p-4">
        <!-- <h3 class="text-body-secondary mb-2">
            Series of {{ .MangaSeriesContent.Total }} works
        </h3> -->

        <!-- Title -->
        <h1 class="mb-2">{{ .Title }}</h1>

        <!-- Author -->
        <div class="d-flex align-items-baseline mb-2">
          <a href="{{ baseURL }}/manga" class="text-decoration-none">
            <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle me-2" style="width: 30px; height: 30px" />
          </a>
          <h4 class="mb-0">
            <a href="{{ baseURL }}/manga" class="text-body text-decoration-none">
              {{ .User.Name }}
            </a>
          </h4>
        </div>

        <div class="d-flex mb-3">
          <small class="text-body-secondary">
            Updated at {{ parseTime:.MangaSeriesContent.Brief.UpdateDate }}<span class="mx-1">&#x30FB;</span>{{- if .MangaSeriesContent.Brief.Total == 1 }}{{ .MangaSeriesContent.Brief.Total }} chapter{{- else }}{{ .MangaSeriesContent.Brief.Total }} chapters{{- end }}
          </small>
        </div>

        <!-- <div class="d-flex flex-wrap text-body-secondary small mb-3">
          <div class="me-3 mb-2 mb-lg-0">
            <i class="bi bi-calendar me-2"></i>Updated at {{ parseTime: .MangaSeriesContent.Brief.UpdateDate }}
          </div>
          <div class="me-3 mb-2 mb-lg-0">
            <i class="bi bi-book me-2"></i>{{- if .MangaSeriesContent.Brief.Total == 1 }}{{ .MangaSeriesContent.Brief.Total }} chapter{{- else }}{{ .MangaSeriesContent.Brief.Total }} chapters{{- end }}
          </div>
        </div> -->

        {* View Pixiv original button *}
        {* TODO: looks weird with the "Read first episode" button also present; should be removed once we support adding to user's watchlist *}
        <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2">
          <small class="text-center">
            <i class="bi bi-box-arrow-up-right me-1"></i>
            <a href="https://pixiv.net/user/{{.User.ID}}/series/{{ .MangaSeriesContent.SeriesID }}" class="text-body-secondary fw-semibold">
              View on pixiv.net
            </a>
          </small>
        </div>

        <!-- Description -->
        {{- if .MangaSeriesContent.Brief.Caption }}
        <p class="mb-0 mt-3">{{ raw: parsePixivRedirect(.MangaSeriesContent.Brief.Caption) }}</p>
        {{- end }}

        {* TODO: include tags for the manga series here *}

        <!-- Read first episode button -->
        <div class="d-flex mt-4">
          <a href="/artworks/{{ .MangaSeriesContent.Brief.FirstIllustID }}" class="custom-btn-secondary">
            <i class="bi bi-book me-2"></i>Read first episode
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 mt-5">
    <h2>{{ .MangaSeriesContent.Total }} works in this series</h2>
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
        {{- range .MangaSeriesContent.Series }}
            <div class="col">
                <div class="card h-100 border-0 bg-transparent">
                    {{ include "fragments/thumbnail-dt" .Brief }}
                    <div class="card-body p-0">
                        {{ include "fragments/thumbnail-tt" .Brief }}
                    </div>
                </div>
            </div>
        {{- end }}
    </div>
  </div>

  <!-- Pagination -->
  {{- url := baseURL + "/series/" + .MangaSeriesContent.SeriesID + "?p="}}
  {{- paginationData := createPaginator(url, "#checkpoint", .Page, .PageLimit, 1, 5) }}
  {{- yield pagination(data=paginationData) }}
</div>
{{- end }}