<article class=" w-full" view-transition-name="page">
    <div class="flex flex-col gap-2">
        <div class="flex flex-col gap-2">
            <div id="page-header" class="flex items-start justify-between">

                <h1 class="scroll-m-20 text-4xl font-semibold tracking-tight sm:text-3xl xl:text-4xl">
                    {% if page.meta.title %}{{ page.meta.title }}{% else %}{{ page.title }}{% endif %}
                </h1>

                <div class="flex items-center gap-2 pt-1.5">
                    {% if page.previous_page %}
                    <a data-slot="button" id="previous-button"
                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 extend-touch-target size-8 shadow-none md:size-7"
                        href="{{ page.previous_page.abs_url }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-arrow-left ">
                            <path d="M5 12l14 0"></path>
                            <path d="M5 12l6 6"></path>
                            <path d="M5 12l6 -6"></path>
                        </svg>
                        <span class="sr-only">Previous</span>
                    </a>
                    {% endif %}
                    {% if page.next_page %}
                    <a data-slot="button" id="next-button"
                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-secondary text-secondary-foreground hover:bg-secondary/80 extend-touch-target size-8 shadow-none md:size-7"
                        href="{{ page.next_page.abs_url }}">
                        <span class="sr-only">Next</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="tabler-icon tabler-icon-arrow-right ">
                            <path d="M5 12l14 0"></path>
                            <path d="M13 18l6 -6"></path>
                            <path d="M13 6l6 6"></path>
                        </svg>
                    </a>
                    {% endif %}
                </div>
            </div>
            {% if page.meta.summary %}
            <p id="summary" class="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
                {{ page.meta.summary }}
            </p>
            {% endif %}
        </div>
        <div class="flex justify-end items-center">
            {% if page.meta.external_links %}
            <div class="grow flex items-center space-x-2 pt-4 external_links">
                {% for link_name, href in page.meta.external_links.items() %}
                <a target="_blank" rel="noreferrer" data-slot="badge"
                    class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&amp;&gt;svg]:size-3 gap-1 [&amp;&gt;svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&amp;]:hover:bg-secondary/90"
                    href="{{ href }}">
                    {{ link_name }}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="tabler-icon tabler-icon-arrow-up-right ">
                        <path d="M17 7l-10 10"></path>
                        <path d="M8 7l9 0l0 9"></path>
                    </svg>
                </a>
                {% endfor %}
            </div>
            {% endif %}
            {% if page.meta.show_datetime == True %}
            {% include "components/datetime.html" %}
            {% elif page.meta.show_datetime == False %}
            {# do nothing #}
            {% elif config.theme.show_datetime == True %}
            {% include "components/datetime.html" %}
            {% endif %}
        </div>

    </div>
    <div class="typography w-full flex-1 *:data-[slot=alert]:first:mt-0">
        {{ page.content }}

    </div>
</article>