---
layout: base.njk
---

<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
  <h1>{{ title }}</h1>

  <p>Everything I have written, from newest to oldest.</p>
</section>

{{ content | safe }}

{% if pagination.pages.length > 1 %}
  <nav>
    <ol class="flex justify-center gap-2">
      <li>
        {% if page.url != pagination.href.first %}
          <a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
        {% else %}
          <span class="flex size-10 cursor-not-allowed  items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-first" %}</span>
        {% endif %}
      </li>
      <li>
        {% if pagination.href.previous %}
          <a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
        {% else %}
          <span class="flex size-10 cursor-not-allowed  items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-left" %}</span>
        {% endif %}
      </li>
      {%- for pageEntry in pagination.pages %}
        <li>
          <a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 aria-[current]:bg-sky-600 aria-[current]:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700 aria-[current]:dark:bg-slate-700"
            href="{{ pagination.hrefs[ loop.index0 ] }}"
            {% if page.url == pagination.hrefs[ loop.index0 ] %}
              aria-current="page"
            {% endif %}
          >
            {{ loop.index }}
          </a>
        </li>
      {%- endfor %}
      <li>
        {% if pagination.href.next %}
          <a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
        {% else %}
          <span class="flex size-10 cursor-not-allowed  items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-right" %}</span>
        {% endif %}
      </li>
      <li>
        {% if page.url != pagination.href.last %}
          <a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
        {% else %}
          <span class="flex size-10 cursor-not-allowed  items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-last" %}</span>
        {% endif %}
      </li>
    </ol>
  </nav>
{% endif %}