{% extends "base.html" %}{% block title %}{{ t('translate_title') }} – PaganOS{% endblock %}
{% block content %}
<div class="card" style="max-width:900px;margin:0 auto">
 <div class="card-header">
 <h2 style="margin:0"> {{ t('translate_title') }}</h2>
 </div>

 <!-- Progress bars -->
 <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1.5rem">
 <div>
 <div style="display:flex;justify-content:space-between;margin-bottom:0.3rem">
 <strong> Polski</strong>
 <span>{{ done_pl }}/{{ total }} ({{ pct_pl }}%)</span>
 </div>
 <div style="background:var(--bg);border-radius:99px;height:10px;overflow:hidden">
 <div style="background:var(--accent);height:100%;width:{{ pct_pl }}%;transition:width 0.5s"></div>
 </div>
 </div>
 <div>
 <div style="display:flex;justify-content:space-between;margin-bottom:0.3rem">
 <strong> English</strong>
 <span>{{ done_en }}/{{ total }} ({{ pct_en }}%)</span>
 </div>
 <div style="background:var(--bg);border-radius:99px;height:10px;overflow:hidden">
 <div style="background:#3fb950;height:100%;width:{{ pct_en }}%;transition:width 0.5s"></div>
 </div>
 </div>
 </div>

 {% if missing_pl or missing_en %}
 <div style="padding:1rem;border-top:1px solid var(--border)">
 <h3 style="font-size:0.95rem;margin-bottom:0.75rem">{{ t('translate_missing') }}</h3>
 <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
 {% if missing_pl %}
 <div>
 <strong style="font-size:0.8rem;color:var(--red)"> {{ t('translate_missing_pl') }} ({{ missing_pl|length }})</strong>
 <div style="max-height:300px;overflow-y:auto;margin-top:0.5rem">
 {% for key in missing_pl %}
 <div style="font-size:0.78rem;font-family:var(--mono);padding:0.15rem 0;color:var(--muted)">❌ {{ key }}</div>
 {% endfor %}
 </div>
 </div>
 {% endif %}
 {% if missing_en %}
 <div>
 <strong style="font-size:0.8rem;color:var(--red)"> {{ t('translate_missing_en') }} ({{ missing_en|length }})</strong>
 <div style="max-height:300px;overflow-y:auto;margin-top:0.5rem">
 {% for key in missing_en %}
 <div style="font-size:0.78rem;font-family:var(--mono);padding:0.15rem 0;color:var(--muted)">❌ {{ key }}</div>
 {% endfor %}
 </div>
 </div>
 {% endif %}
 </div>
 </div>
 {% endif %}

 <!-- Translation table grouped by section -->
 {% for section_name, keys in sections.items() %}
 <div style="padding:1rem;border-top:1px solid var(--border)">
 <h3 style="font-size:0.9rem;margin-bottom:0.75rem"> {{ section_name|capitalize|replace('_',' ') }}</h3>
 <table style="width:100%;font-size:0.8rem">
 <thead><tr>
 <th style="text-align:left;width:30%">Key</th>
 <th style="text-align:left;width:35%"> EN</th>
 <th style="text-align:left;width:35%"> PL</th>
 </tr></thead>
 <tbody>
 {% for key in keys %}
 <tr style="border-bottom:1px solid rgba(255,255,255,0.03)">
 <td style="font-family:var(--mono);padding:0.3rem 0.5rem;font-size:0.75rem;color:var(--muted)">{{ key }}</td>
 <td style="padding:0.3rem 0.5rem">{% if tr.en.get(key) %}{{ tr.en[key] }}{% else %}<span style="color:var(--red)">—</span>{% endif %}</td>
 <td style="padding:0.3rem 0.5rem">{% if tr.pl.get(key) %}{{ tr.pl[key] }}{% else %}<span style="color:var(--red)">—</span>{% endif %}</td>
 </tr>
 {% endfor %}
 </tbody>
 </table>
 </div>
 {% endfor %}

 <div style="padding:1rem;border-top:1px solid var(--border);text-align:center">
 <p style="color:var(--muted);font-size:0.8rem">{{ t('translate_help') }}</p>
 </div>
</div>
{% endblock %}