{% extends "layouts/base.html" %}
{% block extra_head %}
<link rel="alternative" type="application/atom+xml" title="RSS" href="{{ section.path }}atom.xml">
{% endblock extra_head %}

{% block content %}
<div class="flex flex-col gap-4 items-center">
    <div class="flex flex-col gap-1 items-center">
        <p class="font-bold text-xl lg:text-2xl">{{ section.title }}</p>
        {% if section.extra.external_link %}
        <p class="text-lg">See it in action: <a class="hover:underline italic" href={{ section.extra.external_link }}>
            {{ section.extra.external_link_visual }}
        </a></p>
        {% endif %}
        {% if section.extra.git %}
        <a class="text-lg hover:underline" href={{ section.extra.git }}>Git 🦊</a>
        {% endif %}
        {% if section.extra.docs %}
        <a class="text-base hover:underline" href={{ section.extra.docs }}>RTFM here</a>
        {% endif %}
    </div>
    {% if section.pages %}
    <div class="flex flex-col items-center p-2 border border-text-100 rounded-xl drop-shadow-sm">
        <p class="text-lg">{{ section.extra.logs_visual }}</p>
        {% if section.generate_feed %}
        <a class="hover:underline" href="{{ section.path }}atom.xml">RSS Feed</a>
        {% endif %}
        <div class="flex flex-col p-1">
            {% for page in section.pages %}
            <a class="hover:underline" href={{ page.permalink }}>{{ page.title }}</a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
<article class="pt-8 prose lg:prose-lg">
    {{ section.content | safe }}
</article>
{% endblock content %}