{% extends 'base.html' %}{% block content %}
<div class="toolbar"><h1>{{ t('translations.title') }}</h1><div class="toolbar-actions"><a class="button button-secondary" href="/settings">{{ t('common.back') }}</a><button type="button" class="button" id="add-translation-button">➕ {{ t('translations.add') }}</button><a class="button" href="/settings/translations/export">📥 {{ t('translations.export_excel') }}</a></div></div>
<div class="panel translation-filter-panel">
  <form method="get" class="translation-filter-form">
    <label class="checkbox-label translation-filter-checkbox"><input class="checkbox" type="checkbox" name="missing_only" value="1" {% if missing_only %}checked{% endif %}> {{ t('translations.only_missing') }}</label>
    <button type="submit">{{ t('common.search') }}</button>
  </form>
</div>
<form method="post" action="/settings/translations/delete" id="translation-delete-form" onsubmit="return confirm({{ t('translations.delete_confirm')|tojson }});">
  <div class="toolbar-actions translation-selection-actions"><button type="submit" class="button button-danger" id="delete-translations-button" disabled>🗑 {{ t('translations.delete_selected') }}</button></div>
  <div class="table-wrap management-table-scroll"><table class="data-table"><thead><tr><th class="selection-column"><input type="checkbox" id="select-all-translations" aria-label="{{ t('translations.select_all') }}"></th><th>{{ t('translations.key') }}</th>{% for language in languages %}<th>{{ language.native_name }} ({{ language.code }})</th>{% endfor %}</tr></thead><tbody>{% for key, values in rows.items() %}<tr><td class="selection-column"><input type="checkbox" class="translation-select" name="translation_keys" value="{{ key }}" {% if key in protected_keys %}disabled title="{{ t('translations.builtin_protected') }}"{% endif %}></td><td><code>{{ key }}</code>{% if key in protected_keys %}<small class="muted block">{{ t('translations.builtin') }}</small>{% endif %}</td>{% for language in languages %}<td><textarea form="translation-save-form" name="tr__{{ language.code }}__{{ key }}" rows="2">{{ values.get(language.code, '') }}</textarea></td>{% endfor %}</tr>{% endfor %}</tbody></table></div>
</form>
<form method="post" action="/settings/translations/save" id="translation-save-form"><button type="submit" class="button button-save">💾 {{ t('common.save') }}</button></form>
<form method="post" action="/settings/translations/import" enctype="multipart/form-data" class="panel translation-import"><h2>{{ t('translations.import_excel') }}</h2><input type="file" name="file" accept=".xlsx" required><label class="checkbox-label"><input type="checkbox" name="ignore_empty" checked> {{ t('translations.ignore_empty') }}</label><button type="submit">📤 {{ t('common.import') }}</button></form>
<dialog id="add-translation-dialog"><form method="post" action="/settings/translations/add"><h2>{{ t('translations.add') }}</h2><label>{{ t('translations.key') }}<input name="translation_key" pattern="[A-Za-z0-9_.-]+" placeholder="example.section.label" required></label>{% for language in languages %}<label>{{ language.native_name }} ({{ language.code }})<textarea name="value_{{ language.code }}" rows="2"></textarea></label>{% endfor %}<div class="form-actions"><button type="button" class="button button-secondary" onclick="this.closest('dialog').close()">{{ t('common.cancel') }}</button><button type="submit">➕ {{ t('translations.add') }}</button></div></form></dialog>
<script>
(() => {
  const dialog=document.getElementById('add-translation-dialog'); document.getElementById('add-translation-button')?.addEventListener('click',()=>dialog.showModal());
  const boxes=[...document.querySelectorAll('.translation-select:not(:disabled)')], all=document.getElementById('select-all-translations'), button=document.getElementById('delete-translations-button');
  const refresh=()=>{const count=boxes.filter(x=>x.checked).length; button.disabled=count===0; all.checked=boxes.length>0&&count===boxes.length; all.indeterminate=count>0&&count<boxes.length;};
  boxes.forEach(x=>x.addEventListener('change',refresh)); all?.addEventListener('change',()=>{boxes.forEach(x=>x.checked=all.checked);refresh();}); refresh();
})();
</script>
{% endblock %}