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

{# Zurueck-Link traegt das Token, damit das Upload-Formular vorbelegt wieder aufgeht
   (Eingaben + bereits hochgeladene Datei bleiben erhalten). #}
<a class="btn btn-ghost btn-sm backbtn" href="{{ url_for('upload', token=token) }}">← Back to the upload</a>
<h3 class="page-h">Preview <span class="t2">— {{ filename }}</span></h3>
<p class="page-sub">
  Uploaded file, no config.json needed. No API calls yet.
  {% if engine == 'local' %}Translating with a local model — no DeepL quota involved.{% endif %}
</p>

<div class="stats">
  <div class="stat"><div class="n acc">{{ est.total_missing_keys|num }}</div><div class="l">Keys to translate</div></div>
  <div class="stat"><div class="n">{{ est.total_chars|num }}</div><div class="l">Characters</div></div>
  {% if engine == 'local' %}
    <div class="stat" style="display: flex; align-items: center">
      <span class="badge badge-muted"><span class="d"></span>local model</span>
    </div>
  {% else %}
    <div class="stat" style="display: flex; align-items: center">
      {% if est.fits_free_tier %}
        <span class="badge badge-ok"><span class="d"></span>fits the free tier</span>
      {% else %}
        <span class="badge badge-warn"><span class="d"></span>exceeds the free tier</span>
      {% endif %}
    </div>
  {% endif %}
</div>

<div class="card flush" style="margin-bottom: 18px">
  <div class="tbl-wrap">
    <table class="tbl">
      <tr><th>Language</th><th class="num">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="card js-busy" method="post" action="{{ url_for('upload_translate') }}">
  <input type="hidden" name="token" value="{{ token }}">
  {% if engine == 'local' %}
    <div class="field">
      <label class="lbl">Local model</label>
      <p class="engine-note" style="margin-top: 0">
        <code>{{ llm_model }}</code> at <code>{{ llm_base_url }}</code> — make sure the server is running.
      </p>
      <div style="display: flex; gap: 10px; margin-top: 10px">
        <input class="input" type="password" name="api_key" autocomplete="off" style="flex: 1"
          placeholder="API key (only if your server needs one — LM Studio/Ollama don't)">
        <button class="btn" type="submit" data-busy-label="Translating …">Translate now</button>
      </div>
    </div>
  {% else %}
    <div class="field">
      <label class="lbl" for="u-key">DeepL API key
        <span class="hint">{% if key_ok %}already set via env/.env — leave empty{% else %}not found in env/.env — enter it here{% endif %}</span>
      </label>
      <div style="display: flex; gap: 10px">
        <input class="input" id="u-key" type="password" name="api_key" autocomplete="off" style="flex: 1"
          placeholder="{% if key_ok %}from .env{% else %}xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:fx{% endif %}">
        <button class="btn" type="submit" data-busy-label="Translating …">Translate now</button>
      </div>
    </div>
  {% endif %}
</form>

{% endblock %}