{include file="_partials/head.tpl"}

<div class="page-head">
  <div>
    <h1>Переводы <span class="muted" style="font-weight:400">· ключей: {total}</span></h1>
    <p class="muted">Редактор JSON-файлов локалей. Перед сохранением создаётся резервная копия (<code>*.bak</code>).</p>
  </div>
</div>

<form method="get" action="/admin/translations" class="prod-filters">
  <div class="prod-filter-row" style="grid-template-columns: 1fr 1fr auto">
    <select name="scope" class="prod-select" onchange="this.form.submit()">
      [foreach var="scopes" as="s"]
        <option value="{s}" [if {scope}={s}]selected[/if]>{s}</option>
      [/foreach]
    </select>
    <select name="locale" class="prod-select" onchange="this.form.submit()">
      [foreach var="locales" as="l"]
        <option value="{l}" [if {locale}={l}]selected[/if]>{l}</option>
      [/foreach]
    </select>
    <button type="submit" class="btn btn-primary">Открыть</button>
  </div>
</form>

<div class="card">
  <h3>Покрытие переводами в области <code>{scope}</code></h3>
  <div style="display:flex;gap:16px;flex-wrap:wrap">
    [foreach var="coverage" as="c"]
      <div style="min-width:160px">
        <div class="muted">{c.locale}</div>
        <div style="font-size:20px;font-weight:600">{c.pct}% <span class="muted" style="font-size:12px">({c.filled}/{c.total})</span></div>
        <div style="height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:6px">
          <div style="width:{c.pct}%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))"></div>
        </div>
      </div>
    [/foreach]
  </div>
</div>

<form method="post" action="/admin/translations" class="card" style="margin-top:24px">
  {csrf}
  <input type="hidden" name="scope" value="{scope}">
  <input type="hidden" name="locale" value="{locale}">

  <h3>Редактирование <code>{scope}</code> · <code>{locale}</code></h3>
  <p class="muted">Пустое значение = удалить ключ из этого языка.</p>

  [if {rows}]
    <div class="prod-table-wrap" style="margin:16px 0">
    <table class="table">
      <thead><tr><th style="width:35%">Ключ</th><th>Перевод</th></tr></thead>
      <tbody>
        [foreach var="rows" as="r"]
          <tr [if {r.empty}]style="background:#fff7d6"[/if]>
            <td><code style="font-size:11px">{r.key}</code></td>
            <td><input type="text" name="values[{r.key}]" value="{r.value}" style="width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:4px"></td>
          </tr>
        [/foreach]
      </tbody>
    </table>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">{lang key="admin.save"}</button>
    </div>
  [else]
    <p class="muted">Ключей в этом scope ещё нет.</p>
  [/if]
</form>

{include file="_partials/foot.tpl"}
