{{ define "main" }}
{{ $apiURL := .Params.api }}
{{ $isGerman := eq .Site.Language.Lang "de" }}
{{ $loadingError := "" }}
{{ $ratingMax := 5 }}
{{ $items := slice }}

{{ if $apiURL }}
  {{ $remote := try (resources.GetRemote $apiURL (dict "headers" (dict "Accept" "application/json"))) }}
  {{ if $remote.Err }}
    {{ $loadingError = printf "%v" $remote.Err }}
  {{ else }}
    {{ with $remote.Value }}
      {{ $payload := . | transform.Unmarshal }}
      {{ with $payload.ratingMax }}
        {{ $ratingMax = . }}
      {{ end }}
      {{ with $payload.items }}
        {{ $items = sort . "updatedAt" "desc" }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

<main class="manga-page">
  <section class="manga-hero">
    <div>
      <p class="manga-kicker">{{ if $isGerman }}Bibliothek{{ else }}Library{{ end }}</p>
      <h1>{{ .Title }}</h1>
      <p class="manga-intro">
        {{ if $isGerman }}
        Mangas aus der eigenen Bibliothek.
        {{ else }}
        Manga from your own library.
        {{ end }}
      </p>
    </div>
    <div class="manga-hero-meta">
      <span>{{ len $items }} {{ if $isGerman }}Bände{{ else }}volumes{{ end }}</span>
    </div>
  </section>

  <section class="manga-library">
    {{ if $loadingError }}
    <div class="manga-library-status">
      {{ if $isGerman }}
      Die Bibliothek konnte beim Build nicht geladen werden.
      {{ else }}
      The library could not be loaded during build.
      {{ end }}
    </div>
    {{ else if eq (len $items) 0 }}
    <div class="manga-library-status">
      {{ if $isGerman }}
      Noch keine gelesenen Mangas gefunden.
      {{ else }}
      No read manga found yet.
      {{ end }}
    </div>
    {{ else }}
    <div class="manga-library-list">
      {{ range $items }}
      {{ $item := . }}
      {{ $authors := cond (gt (len .authors) 0) (delimit .authors ", ") (cond $isGerman "Unbekannt" "Unknown") }}
      {{ $displayTitle := printf "%s - %s %s" .editionTitle (cond $isGerman "Band" "Vol.") .numberDisplay }}
      {{ if .title }}
        {{ $displayTitle = printf "%s - %s" $displayTitle .title }}
      {{ end }}
      {{ $cover := .cover }}
      {{ if not $cover }}
        {{ $cover = .editionCover }}
      {{ end }}
      <article class="manga-list-item">
        <div class="manga-list-cover">
          {{ if $cover }}
          <img src="{{ $cover }}" alt="{{ $displayTitle }}" loading="lazy" referrerpolicy="no-referrer">
          {{ else }}
          <div class="manga-cover-fallback"></div>
          {{ end }}
        </div>
        <div class="manga-list-body">
          <p class="manga-card-series">{{ .editionTitle }}</p>
          <h2 class="manga-card-title">{{ $displayTitle }}</h2>
          <p class="manga-card-author">{{ $authors }}</p>
        </div>
        <div class="manga-list-meta">
          <div class="manga-card-footer">
            <div class="manga-rating" aria-label="{{ if gt .rating 0 }}{{ .rating }} / {{ $ratingMax }}{{ else }}{{ if $isGerman }}Keine Bewertung{{ else }}Unrated{{ end }}{{ end }}">
              <span class="manga-rating-stars">
                {{ range seq $ratingMax }}
                <svg viewBox="0 0 24 24" aria-hidden="true" class="manga-star {{ if le . $item.rating }}is-filled{{ end }}">
                  <path d="M12 2.25l2.96 6 6.62.96-4.79 4.67 1.13 6.59L12 17.36l-5.92 3.11 1.13-6.59-4.79-4.67 6.62-.96L12 2.25z"></path>
                </svg>
                {{ end }}
              </span>
              <span class="manga-rating-value">
                {{ if gt .rating 0 }}
                {{ .rating }}/{{ $ratingMax }}
                {{ else }}
                {{ if $isGerman }}Keine Bewertung{{ else }}Unrated{{ end }}
                {{ end }}
              </span>
            </div>
            {{ with .updatedAt }}
            <span class="manga-card-date">
              {{ if $isGerman }}Aktualisiert{{ else }}Updated{{ end }} {{ dateFormat ":date_medium" . }}
            </span>
            {{ end }}
          </div>
        </div>
      </article>
      {{ end }}
    </div>
    {{ end }}
  </section>
</main>
{{ end }}