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

<h3 class="page-h">Upload wizard</h3>
<p class="page-sub">Upload a source file, pick the languages, preview, translate, download a ZIP — no config.json needed.</p>

<form class="card js-busy" method="post" action="{{ url_for('upload_estimate') }}" enctype="multipart/form-data"
  id="wizard-form">
  {% if prior_token %}<input type="hidden" name="token" value="{{ prior_token }}">{% endif %}

  <div class="drop">
    <div class="di">⤒</div>
    <div class="dt">Choose a source file</div>
    <div class="dm">json · yaml · arb · strings · properties · xml · csv</div>
    {# Wenn schon eine Datei aus einem frueheren Schritt vorliegt, ist ein neuer Upload
       optional — der Browser kann ein Datei-Feld nicht vorbefuellen, die Datei liegt aber
       server-seitig noch bereit. #}
    <input type="file" name="file" {% if not prior_filename %}required{% endif %}>
    {% if prior_filename %}
      <div class="dm" style="margin-top: 8px">Using <strong>{{ prior_filename }}</strong> — choose another to replace it.</div>
    {% endif %}
  </div>

  <div class="row2">
    <div class="field">
      <label class="lbl" for="u-src">Source language</label>
      {# kein autocomplete="off": das unterdrueckt in Chrome das Datalist-Dropdown beim
         Klick ins Feld — dann sieht man keine Vorschlaege. #}
      <input class="input" id="u-src" name="source_lang" list="src-langs"
        value="{{ prior.source_lang or 'EN' }}">
      {# value bleibt der reine Code, der sichtbare Text zeigt zusaetzlich den Namen. #}
      <datalist id="src-langs">{% for code, name in source_languages %}<option value="{{ code }}">{{ code }} — {{ name }}</option>{% endfor %}</datalist>
    </div>
    <div class="field">
      <label class="lbl">Target languages
        <span class="hint">type to search, or enter any code (e.g. for a local model)</span></label>
      {# Chips + Freitext-Eingabe. Die Chips werden von upload.js in dieses hidden input
         (komma-getrennt) geschrieben, das der Server unveraendert liest. #}
      <input type="hidden" name="target_langs" id="u-tgt-value" value="{{ prior.target_langs or 'DE, FR, ES' }}">
      <div class="lchips" id="u-tgt-chips"></div>
      <input class="input" id="u-tgt-add" list="tgt-langs"
        placeholder="add a language and press Enter" style="margin-top: 8px">
      <datalist id="tgt-langs">{% for code, name in languages %}<option value="{{ code }}">{{ code }} — {{ name }}</option>{% endfor %}</datalist>
    </div>
  </div>

  <div class="row2">
    <div class="field">
      <label class="lbl" for="u-form">Formality <span class="hint">DeepL only</span></label>
      <select class="select" id="u-form" name="formality">
        {% for f in ["default", "less", "more", "prefer_less", "prefer_more"] %}
          <option {% if prior.formality == f %}selected{% endif %}>{{ f }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label class="lbl" for="u-fmt">Force format</label>
      <select class="select" id="u-fmt" name="file_format">
        <option value="">auto (from the extension)</option>
        {% for f in formats %}<option {% if prior.file_format == f %}selected{% endif %}>{{ f }}</option>{% endfor %}
      </select>
    </div>
  </div>

  <div class="field">
    <label class="lbl" for="u-ctx">Context <span class="hint">optional — helps with ambiguous strings</span></label>
    <textarea class="textarea" id="u-ctx" name="context" rows="2"
      placeholder="e.g. UI strings of a finance app, tone: factual">{{ prior.context }}</textarea>
  </div>

  {# --- Engine ------------------------------------------------------------ #}
  <div class="field">
    <label class="lbl">Translation engine</label>
    <div class="seg" id="u-engine">
      <button type="button" class="seg-btn" data-engine="deepl">DeepL</button>
      <button type="button" class="seg-btn" data-engine="local">Local / OpenAI-compatible</button>
    </div>
    <input type="hidden" name="engine" id="u-engine-value" value="{{ prior.engine or 'deepl' }}">
    <div class="engine-note" id="u-engine-deepl-note">
      Uses your DeepL API key. Best quality; supports only DeepL's languages.
    </div>
    <div class="engine-box" id="u-engine-local" hidden>
      <p class="engine-note" style="margin-top: 0">
        Any OpenAI-compatible server (LM Studio, Ollama, OpenAI, Groq …). Translates any
        language the model knows — including ones DeepL doesn't offer.
      </p>
      <div class="row2">
        <div class="field">
          <label class="lbl" for="u-llm-url">Server base URL</label>
          <input class="input" id="u-llm-url" name="llm_base_url"
            value="{{ prior.llm_base_url or default_base_url }}" placeholder="http://localhost:1234">
        </div>
        <div class="field">
          <label class="lbl" for="u-llm-model">Model</label>
          <input class="input" id="u-llm-model" name="llm_model"
            value="{{ prior.llm_model or default_model }}">
        </div>
      </div>
    </div>
  </div>

  <div class="formbtns">
    <button class="btn" type="submit" data-busy-label="Reading …">Preview →</button>
  </div>
</form>

<script src="{{ url_for('static', filename='upload.js') }}"></script>

{% endblock %}