{% extends "base.html" %}{% block title %}{{ doc.title }} – PaganOS{% endblock %}
{% block og_title %}{{ doc.title }} – PaganOS{% endblock %}
{% block head %}
<style>
.ab-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.ab-title{font-size:1.9rem;font-weight:800;color:var(--text-bright);letter-spacing:-0.02em;margin:0;line-height:1.2}
.ab-tools{display:flex;gap:0.45rem;align-items:center;flex-wrap:wrap}
.lang-sw{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--bg2)}
.lang-sw a{padding:0.3rem 0.9rem;font-size:0.8rem;color:var(--muted);border-right:1px solid var(--border)}
.lang-sw a:last-child{border-right:none}
.lang-sw a.on{background:rgba(63,185,80,0.12);color:var(--accent);font-weight:600}
.ab-meta{font-size:0.75rem;color:var(--muted);margin-top:1.5rem;padding-top:0.75rem;border-top:1px solid var(--border);display:flex;gap:1rem;flex-wrap:wrap}
</style>
{% endblock %}
{% block content %}

<header class="ab-head">
 <h1 class="ab-title">{{ doc.title }}</h1>
 <div class="ab-tools">
 <div class="lang-sw">
 <a href="/about?lang=pl" class="{% if doc.lang=='pl' %}on{% endif %}"><span class="flg" data-lang="pl"></span> Polski</a>
 <a href="/about?lang=en" class="{% if doc.lang=='en' %}on{% endif %}"><span class="flg" data-lang="en"></span> English</a>
 </div>
 {% if is_admin %}<a class="btn btn-sm btn-ghost" href="/admin/about"> Edytuj</a>{% endif %}
 </div>
</header>

<article class="card" style="padding:1.75rem 2rem">
 {% if doc.slug == 'about' %}
 <div style="text-align:center;margin:0 0 1rem">
 <img src="/static/pagan-loki-pingwin.svg" alt="PaganOS" width="110" height="110" style="display:inline-block">
 </div>
 {% endif %}
 <div class="markdown-body">{{ doc.content | markdown | safe }}</div>
 <div class="ab-meta">
 <span> {{ doc.author or '—' }}</span>
 {% if doc.updated_at %}<span> {{ doc.updated_at }}</span>{% endif %}
 {% if other_langs %}
 <span>{{ t('available_in') }}: {% for l in other_langs %}<a href="/about?lang={{ l }}"><span class="flg" data-lang="{{ l }}"></span> {{ {'pl':'Polski','en':'English'}[l] or l }}</a>{% if not loop.end %} · {% endif %}{% endfor %}</span>
 {% endif %}
 </div>
</article>
{% endblock %}