{% extends "base.html" %}
{% block title %}{{ t('docs') }} – PaganLinux Mokosz{% endblock %}
{% block head %}
<style>
.lang-sw{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--bg2)}
.lang-sw a{padding:.35rem .85rem;font-size:.8rem;color:var(--muted);border-right:1px solid var(--border)}
.lang-sw a:last-child{border-right:0}.lang-sw a.on{background:var(--accent-glow);color:var(--accent);font-weight:700}
</style>
{% endblock %}
{% block content %}
<div class="doc-shell">
 <section class="doc-hero">
  <div class="doc-kicker">PaganLinux • Mokosz</div>
  <h1>Dokumentacja PaganLinux</h1>
  <p>Przewodniki, poradniki i opisy — od instalacji systemu po budowanie pakietów i diagnozowanie problemów.</p>
 </section>
 <div class="doc-toolbar">
  <label class="doc-search" for="doc-search"><input id="doc-search" type="search" placeholder="Szukaj w dokumentacji…" autocomplete="off"></label>
  <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
   <div class="lang-sw"><a href="/docs?lang=pl" class="{% if lang=='pl' %}on{% endif %}"><span class="flg" data-lang="pl"></span> Polski</a><a href="/docs?lang=en" class="{% if lang=='en' %}on{% endif %}"><span class="flg" data-lang="en"></span> English</a></div>
   <a class="btn btn-primary" href="/docs/getting-started?lang={{ lang }}">{{ t('getting_started') }}</a>
   {% if is_admin %}<a class="btn btn-ghost" href="/docs/new">{{ t('new_doc') }}</a>{% endif %}
  </div>
 </div>
 <div class="doc-grid" id="doc-grid">
 {% for doc in docs %}
  <a class="doc-card" href="/docs/{{ doc.slug }}?lang={{ doc.lang }}" data-doc-search="{{ (doc.title ~ ' ' ~ doc.content)|striptags|e }}">
   <div class="ic">{% if 'install' in doc.slug %}⬇{% elif 'build' in doc.slug %}⚒{% elif 'repo' in doc.slug or 'pack' in doc.slug %}◈{% elif 'security' in doc.slug %}◇{% elif 'trouble' in doc.slug or 'faq' in doc.slug %}?{% else %}✦{% endif %}</div>
   <div class="dc-title">{{ doc.title }}</div>
   <div class="dc-ex">{{ doc.content|replace('###','')|replace('##','')|replace('#','')|replace('**','')|replace('`','')|replace('*','')|replace('_','')|striptags|truncate(160) }}</div>
   <div class="dc-foot"><span><span class="flg" data-lang="{{ doc.lang }}"></span> {{ doc.lang|upper }}</span><span>Otwórz →</span></div>
  </a>
 {% else %}
  <div class="card doc-empty"><p class="text-muted" style="text-align:center;padding:1.5rem">{{ t('no_docs') }}</p></div>
 {% endfor %}
 </div>
 <p id="doc-empty-search" class="card text-muted" style="display:none;text-align:center;margin-top:1rem">Brak dokumentów pasujących do wyszukiwania.</p>
</div>
<script>
(function(){
 const input=document.getElementById('doc-search'), cards=[...document.querySelectorAll('[data-doc-search]')], empty=document.getElementById('doc-empty-search');
 if(!input)return;
 input.addEventListener('input',function(){const q=this.value.trim().toLowerCase();let n=0;cards.forEach(c=>{const show=!q||c.dataset.docSearch.toLowerCase().includes(q);c.hidden=!show;if(show)n++});empty.style.display=cards.length&&n===0?'block':'none'});
})();
</script>
{% endblock %}