{{ define "main" }}

{{ if .Site.Params.list.showHero | default false }}
{{ $heroStyle := print "partials/hero/" .Site.Params.list.heroStyle ".html" }}
{{ if templates.Exists $heroStyle }}
{{ partial $heroStyle . }}
{{ else }}
{{ partial "partials/hero/basic.html" . }}
{{ end }}
{{- end -}}

{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in
.TableOfContents "<ul") }} <header>
  {{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
  {{ partial "breadcrumbs.html" . }}
  {{ end }}
  <h1 class="mt-5 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
  <div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
    {{ partial "article-meta-list.html" (dict "context" . "scope" "single") }}
  </div>
  </header>
  <section class="{{ if $toc -}}
      mt-12
    {{- else -}}
      mt-0
    {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
    {{ if $toc }}
    <div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
      <div class="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10">
        {{ partial "toc.html" . }}
      </div>
    </div>
    {{ end }}
    <div class="min-w-0 min-h-0 max-w-prose">
      {{ .Content | emojify }}
    </div>
    <script>

      var liked_article = false

      if (typeof auth !== 'undefined') {
        var oid = "views_{{ .File.Path }}"
        var id = oid ? oid.replaceAll("/", "-") : oid

        var viewed = localStorage.getItem(id);

        if (!viewed) {
          auth.signInAnonymously()
            .then(() => {
              var docRef = db.collection('views').doc(id)
              localStorage.setItem(id, true);
              docRef.get().then((doc) => {
                if (doc.exists) {
                  db.collection('views').doc(id).update({
                    views: firebase.firestore.FieldValue.increment(1)
                  });
                } else {
                  db.collection('views').doc(id).set({ views: 1 })
                }
              }).catch((error) => {
                console.log("Error getting document:", error);
              });
            })
            .catch((error) => {
              var errorCode = error.code;
              var errorMessage = error.message;
              console.error(errorCode, errorMessage)
            });
        }

        var oid_likes = "likes_{{ .File.Path }}"
        var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes

        var liked = localStorage.getItem(id_likes);

        if (liked) {
          liked_article = true
          document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
          document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
          document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
        }

      }

      function like_article(id_likes) {
        auth.signInAnonymously()
          .then(() => {
            var docRef = db.collection('likes').doc(id_likes)
            docRef.get().then((doc) => {
              liked_article = true
              localStorage.setItem(id_likes, true);
              document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = ""
              document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = "none"
              document.querySelectorAll("span[id='likes_button_text']")[0].innerText = ""
              if (doc.exists) {
                db.collection('likes').doc(id_likes).update({
                  likes: firebase.firestore.FieldValue.increment(1)
                });
              } else {
                db.collection('likes').doc(id_likes).set({ likes: 1 })
              }
            }).catch((error) => {
              console.log("Error getting document:", error);
            });
          })
          .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            console.error(errorCode, errorMessage)
          });
      }

      function remove_like_article(id_likes) {
        auth.signInAnonymously()
          .then(() => {
            var docRef = db.collection('likes').doc(id_likes)
            docRef.get().then((doc) => {
              liked_article = false
              localStorage.removeItem(id_likes);
              document.querySelectorAll("span[id='likes_button_heart']")[0].style.display = "none"
              document.querySelectorAll("span[id='likes_button_emtpty_heart']")[0].style.display = ""
              document.querySelectorAll("span[id='likes_button_text']")[0].innerText = "\xa0Like"
              if (doc.exists) {
                db.collection('likes').doc(id_likes).update({
                  likes: firebase.firestore.FieldValue.increment(-1)
                });
              } else {
                db.collection('likes').doc(id_likes).set({ likes: 0 })
              }
            }).catch((error) => {
              console.log("Error getting document:", error);
            });
          })
          .catch((error) => {
            var errorCode = error.code;
            var errorMessage = error.message;
            console.error(errorCode, errorMessage)
          });
      }

      function process_article() {
        var oid_likes = "likes_{{ .File.Path }}"
        var id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes
        if (!liked_article) {
          like_article(id_likes)
        } else {
          remove_like_article(id_likes)
        }
      }

    </script>
  </section>
  {{ if gt .Pages 0 }}

  {{ if .Site.Params.list.cardView | default false }}

  {{ $cardViewScreenWidth := .Site.Params.list.cardViewScreenWidth}}

  {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}

  {{ if $cardViewScreenWidth }}
  <section class="relative w-screen" style="left: calc(-50vw + 50%);">
    <div class="flex flex-wrap pl-8 pr-8">
      {{ else }}
      <section class="w-full">
        <div class="flex flex-wrap">
          {{ end }}

          {{ end }}



          {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
          <h2 class="mt-12 mb-5 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
            {{ .Key }}
          </h2>
          {{ else }}
          {{ end }}

          {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}

          {{ if $cardViewScreenWidth}}
          <section class="relative w-screen" style="left: calc(-50vw + 50%);">
            <div class="flex flex-wrap pl-8 pr-8">
              {{ else }}
              <section class="w-full">
                <div class="flex flex-wrap">
                  {{ end }}
                  {{ end }}

                  {{ range .Pages }}

                  {{ if $cardViewScreenWidth }}
                  <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
                    {{ else }}
                    <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
                      {{ end }}

                      {{ partial "article-link-card.html" . }}
                    </div>
                    {{ end }}
                    {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
                  </div>
              </section>
              {{ end }}


              {{ end }}

              {{ if not $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
            </div>
          </section>
          {{ end }}

          {{ else }}
          <section class="space-y-10 w-full">
            {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
            {{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
            <h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
              {{ .Key }}
            </h2>
            {{ end }}
            {{ range .Pages }}
            {{ partial "article-link.html" . }}
            {{ end }}
            {{ end }}
          </section>
          {{ partial "pagination.html" . }}
          {{ end }}

          {{ else }}
          <section class="mt-10 prose dark:prose-invert">
            <p class="py-8 border-t">
              <em>{{ i18n "list.no_articles" | emojify }}</em>
            </p>
          </section>
          {{ end }}
          {{ end }}