{% extends "base.html" %}{% block title %}{{ doc.title }} – PaganOS Docs{% endblock %}
{% block og_title %}{{ doc.title }} – PaganOS Docs{% endblock %}
{% block head %}
<style>
/* Doc view Mokosz */
.dv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.dv-crumbs{font-size:0.8rem;color:var(--muted);margin-bottom:0.5rem}
.dv-crumbs a{color:var(--muted)}
.dv-title{font-size:1.7rem;font-weight:800;color:var(--text-bright);letter-spacing:-0.02em;line-height:1.25;margin:0}
.dv-tools{display:flex;gap:0.4rem;align-items:center;flex-wrap:wrap}
.dv-lang{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--bg2)}
.dv-lang a{padding:0.25rem 0.8rem;font-size:0.78rem;color:var(--muted);border-right:1px solid var(--border)}
.dv-lang a:last-child{border-right:none}
.dv-lang a.on{background:var(--accent-glow);color:var(--accent);font-weight:600}
.dv-card{padding:1.6rem 2rem;max-width:900px;margin:0 auto}
.dv-body{border-top:1px solid var(--border);padding-top:1.4rem}
.dv-meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:0.75rem;color:var(--muted);margin-top:1.6rem;padding-top:0.8rem;border-top:1px solid var(--border)}
.dv-edit{color:var(--accent);font-size:0.8rem}
</style>
{% endblock %}
{% block content %}

<header class="dv-head">
 <div style="min-width:0">
 <div class="dv-crumbs"><a href="/docs"> {{ t('docs') }}</a> / <span>{{ doc.title }}</span></div>
 <h1 class="dv-title">{{ doc.title }}</h1>
 </div>
 <div class="dv-tools">
 <div class="dv-lang">
 <a href="/docs/{{ doc.slug }}?lang=pl" class="{% if doc.lang=='pl' %}on{% endif %}"><span class="flg" data-lang="pl"></span> Polski</a>
 <a href="/docs/{{ doc.slug }}?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-ghost btn-sm" href="/docs/{{ doc.slug }}/edit?lang={{ doc.lang }}"> {{ t('edit') }}</a>
 <form method="POST" action="/docs/{{ doc.slug }}/delete?lang={{ doc.lang }}" style="display:inline" onsubmit="return confirm('{{ t('confirm_delete') }}?')">
 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 <button type="submit" class="btn btn-danger btn-sm"> {{ t('delete') }}</button>
 </form>
 {% endif %}
 </div>
</header>

<div class="dv-layout">
<article class="card dv-card">
 <div class="dv-body">
 {% if doc.slug == 'getting-started' %}
 <div style="text-align:center;margin:0 0 1.25rem">
 <img src="/static/pagan-loki-pingwin.svg" alt="Pagan Linux" width="120" height="120" style="display:inline-block">
 </div>
 {% endif %}
 <div class="markdown-body">{{ doc.content | markdown | safe }}</div>
 </div>
 <div class="dv-meta">
 <span>{{ t('available_in') }}:
   <a href="/docs/{{ doc.slug }}?lang=pl"><span class="flg" data-lang="pl"></span> Polski</a> ·
   <a href="/docs/{{ doc.slug }}?lang=en"><span class="flg" data-lang="en"></span> English</a>
 </span>
 {% if other_langs %}
 <span>Dostępne też: {% for l in other_langs %}<a href="/docs/{{ doc.slug }}?lang={{ l }}"><span class="flg" data-lang="{{ l }}"></span> {{ {'pl':'Polski','en':'English'}[l] or l }}</a>{% if not loop.last %} · {% endif %}{% endfor %}</span>
 {% endif %}
 <span><a href="/docs">← {{ t('back') }}</a></span>
 </div>
</article>
<aside class="dv-aside">
 <h3>Dokumentacja</h3>
 <a href="/docs?lang={{ doc.lang }}">← Wszystkie dokumenty</a>
 <a href="/docs/getting-started?lang={{ doc.lang }}">Pierwsze kroki</a>
 <a href="/docs?lang={{ doc.lang }}#install">Instalacja i konfiguracja</a>
 <a href="/docs?lang={{ doc.lang }}#build">Budowanie i pakiety</a>
 <h3 style="margin-top:1rem">Język</h3>
 <a href="/docs/{{ doc.slug }}?lang=pl">🇵🇱 Polski</a>
 <a href="/docs/{{ doc.slug }}?lang=en">🇬🇧 English</a>
</aside>
</div>
<script>
(function(){document.querySelectorAll('.markdown-body pre').forEach(function(pre){var b=document.createElement('button');b.className='btn btn-sm';b.type='button';b.textContent='Kopiuj';b.style.cssText='float:right;margin:-.35rem -.45rem 0 .6rem';b.onclick=function(){var code=pre.querySelector('code');navigator.clipboard&&navigator.clipboard.writeText(code?code.textContent:pre.innerText).then(function(){b.textContent='Skopiowano';setTimeout(function(){b.textContent='Kopiuj'},1400)})};pre.insertBefore(b,pre.firstChild)})})();
</script>
{% endblock %}