{{ $recentArticles := 5 }}
{{ $showMoreLinkDest := "/posts" }}
{{ if .Site.Params.homepage.showRecent | default false }}
{{ if index .Site.Params.homepage "showRecentItems" }}
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
{{ end }}
<h2 class="mt-8 text-2xl font-extrabold mb-10">{{ i18n "shortcode.recent_articles" | emojify }}</h2>

{{ if .Site.Params.homepage.cardView | default false }}
{{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
<section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
  <div class="flex flex-wrap pl-8 pr-8">
    {{ else }}
    <section class="w-full">
      <div class="flex flex-wrap">
        {{ end }}

        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
        .Site.Params.mainSections)).Pages }}

        {{ if .Site.Params.homepage.cardViewScreenWidth | default false }}
        <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 }}
        </div>
    </section>
    {{ else }}
    <section class="space-y-10 w-full">
      {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections)).Pages
      }}
      {{ partial "article-link.html" . }}
      {{ end }}
    </section>
    {{ end }}
    {{ if .Site.Params.homepage.showMoreLink | default false }}
    {{ if index .Site.Params.homepage "showRecentItems" }}
    {{ $showMoreLinkDest = .Site.Params.homepage.showMoreLinkDest }}
    {{ end }}
    <div class="mt-10 flex justify-center">
      <a href="{{ $showMoreLinkDest }}">
        <button
          class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">Show
          More</button>
      </a>
    </div>
    {{ end }}
    {{ end }}