{% 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.status and section.extra.status == "active" %}
        <p class="text-green-400 font-semibold">active</p>
        {% elif section.extra.status and section.extra.status == "inactive" %}
        <p class="text-red-400 font-semibold">inactive</p>
        {% else %}
        <p class="text-amber-400 font-semibold">unknown</p>
        {% endif %}
        {% if section.extra.external_link %}
        <p class="lg:text-lg">See it in action: <a data-umami-event="project-{{ section.extra.id }}-external" class="hover:underline italic font-semibold" rel="noopener" target="_blank" href={{ section.extra.external_link }}>
            {{ section.extra.external_link_visual }}
        </a></p>
        {% endif %}
        {% if section.extra.git %}
        <a data-umami-event="project-{{ section.extra.id }}-git" class="lg:text-lg text-orange-400 font-semibold hover:underline" rel="noopener" target="_blank" href={{ section.extra.git }}>Git 🦊</a>
        {% endif %}
        {% if section.extra.docs %}
        <a data-umami-event="project-{{ section.extra.id }}-docs" class="text-sm lg:text-base text-emerald-400 font-semibold hover:underline" rel="noopener" target="_blank" href={{ section.extra.docs }}>RTFM</a>
        {% endif %}
    </div>
    {% if section.pages %}
    <div class="flex flex-col items-center p-2 border border-text-100 rounded-xl drop-shadow-xs">
        <p class="text-lg">{{ section.extra.logs_visual }}</p>
        {% if section.generate_feeds %}
        <a data-umami-event="project-{{ section.extra.id }}-feed" 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 data-umami-event="project-{{ section.extra.id }}-page-{{ page.slug }}" 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 %}