{% extends "base.html" %}
{% block content %}

<a class="btn btn-ghost btn-sm backbtn" href="{{ url_for('dashboard') }}">← Back to the dashboard</a>
<h3 class="page-h">Preview <span class="t2">— {{ title }}</span></h3>
<p class="page-sub">
  Cost estimate — no API calls, no quota spent.
  {% if override %}<strong>Override:</strong> re-translating <strong>all</strong> keys, not just missing ones.{% endif %}
</p>

<div class="stats">
  <div class="stat"><div class="n">{{ est.master_keys|num }}</div><div class="l">Master keys</div></div>
  <div class="stat"><div class="n acc">{{ est.total_missing_keys|num }}</div>
    <div class="l">{{ "Keys to translate" if override else "Missing keys total" }}</div></div>
  <div class="stat"><div class="n">{{ est.total_chars|num }}</div><div class="l">Characters</div></div>
</div>

{% if est.fits_free_tier %}
  <div class="notice ok" style="margin-bottom: 20px">
    <div class="ico">✓</div>
    <div>
      <div class="nt">Fits the free tier</div>
      <div class="nm">{{ est.total_chars|num }} of 500,000 characters/month.</div>
    </div>
  </div>
{% else %}
  <div class="notice warn" style="margin-bottom: 20px">
    <div class="ico">!</div>
    <div>
      <div class="nt">Exceeds the free tier</div>
      <div class="nm">{{ est.total_chars|num }} characters — the free tier covers 500,000/month.</div>
    </div>
  </div>
{% endif %}

<div class="card flush">
  <div class="tbl-wrap">
    <table class="tbl">
      <tr><th>Language</th><th class="num">{{ "Keys" if override else "Missing keys" }}</th><th class="num">Characters</th></tr>
      {% for lang, d in est.per_language.items() %}
        <tr>
          <td><strong>{{ lang }}</strong></td>
          <td class="num">{{ d.missing_keys|num }}</td>
          <td class="num">{{ d.chars|num }}</td>
        </tr>
      {% endfor %}
    </table>
  </div>
</div>

<form class="formbtns mt14 js-busy" method="post" action="{{ url_for('translate') }}">
  <input type="hidden" name="target" value="{{ title }}">
  {% if override %}<input type="hidden" name="override" value="on">{% endif %}
  <button class="btn" type="submit" data-busy-label="Translating …">Translate now</button>
</form>

{% endblock %}