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

{% if key_ok %}
  <div class="notice ok" style="margin-bottom: 22px">
    <div class="ico">✓</div>
    <div>
      <div class="nt">DeepL API key found</div>
      <div class="nm">Preview &amp; check work without a key — translating needs one.</div>
    </div>
  </div>
{% else %}
  <div class="notice warn" style="margin-bottom: 22px">
    <div class="ico">!</div>
    <div>
      <div class="nt">No DeepL API key</div>
      <div class="nm">Preview &amp; check work without a key. To translate, add a key in
        <a href="{{ url_for('settings') }}">Settings</a> (it is stored in <code>.env</code>).</div>
    </div>
  </div>
{% endif %}

{% if config_error %}
  {# Erststart (kein config.json — z.B. nach Doppelklick der .exe). Kein CLI-Fehlertext,
     sondern zwei klare Wege: der Wizard fuer "einfach ausprobieren" (kein Setup), und der
     Projektmodus fuer wiederkehrende Uebersetzung eigener Dateien. #}
  <h3 class="hero-h">Welcome to deepl-i18n</h3>
  <p class="hero-sub">Translate localization files with DeepL. Two ways to start:</p>
  <div class="hero-cards">
    <div class="hero-card hero-primary">
      <div class="hero-ic">⬆</div>
      <div class="hero-ct">Just try it</div>
      <div class="hero-cd">Upload a file, pick target languages, download the translations as a
        ZIP. No config, nothing to set up.</div>
      <a class="btn" href="{{ url_for('upload') }}">Upload a file &amp; translate</a>
    </div>
    <div class="hero-card">
      <div class="hero-ic">⚙</div>
      <div class="hero-ct">Set up a project</div>
      <div class="hero-cd">Point a <code>config.json</code> at the locale files in your repo, then
        re-translate only what's missing — again and again.</div>
      <a class="btn btn-ghost" href="{{ url_for('settings') }}">Set up a config.json →</a>
    </div>
  </div>
  <p class="hero-note">No <code>config.json</code> at <code>{{ config_path }}</code> yet — that's
    fine for the upload wizard.</p>
{% else %}
  <h3 class="sec-h">Configured targets · config.json</h3>
  {% if not targets %}
    {# config.json existiert, hat aber kein Target — sonst waere das Dashboard hier leer. #}
    <div class="empty-card">
      <div class="hero-ic">◔</div>
      <div class="hero-ct">No targets yet</div>
      <div class="hero-cd">A target points at a source file and an output folder. Add one in
        Settings to translate it from here — or skip the config and use the upload wizard.</div>
      <div class="empty-actions">
        <a class="btn" href="{{ url_for('settings') }}">Add a target in Settings</a>
        <a class="btn btn-ghost" href="{{ url_for('upload') }}">Use the upload wizard</a>
      </div>
    </div>
  {% endif %}
  <div class="stack">
    {% for t in targets %}
      <div class="card">
        <div class="tcard-h">
          <div>
            <div class="tname">{{ t.name }}</div>
            <div class="tpath">{{ t.input_path }} → {{ t.output_dir }}</div>
          </div>
          {% if t.key_count is none %}
            <span class="badge badge-err"><span class="d"></span>Master file not readable</span>
          {% else %}
            <span class="badge badge-muted">{{ t.key_count|num }} keys</span>
          {% endif %}
        </div>

        {# Ein Formular fuer alle drei Aktionen, damit language/override/backup ueberall
           gelten. Preview & Check gehen per GET (formaction+formmethod) an ihre Routen,
           Translate per POST an das action des Formulars. Frueher waren Preview/Check
           blosse Links, die den override-Haken nicht mitgeschickt haben. #}
        <form class="trans-row js-busy" method="post" action="{{ url_for('translate') }}">
          <input type="hidden" name="target" value="{{ t.name }}">
          <select class="select sm" name="lang" aria-label="Language">
            <option value="">all languages</option>
            {% for l in langs %}<option>{{ l }}</option>{% endfor %}
          </select>
          <label class="check"><input type="checkbox" name="override"> override</label>
          <label class="check"><input type="checkbox" name="backup"> backup</label>
          <span class="trans-actions">
            <button class="btn btn-ghost btn-sm" type="submit"
              formaction="{{ url_for('estimate') }}" formmethod="get"
              data-busy-label="Loading …">Preview · Cost</button>
            <button class="btn btn-ghost btn-sm" type="submit"
              formaction="{{ url_for('check') }}" formmethod="get"
              data-busy-label="Checking …">Check</button>
            <button class="btn btn-sm" type="submit" data-busy-label="Translating …">Translate →</button>
          </span>
        </form>
      </div>
    {% endfor %}
  </div>
{% endif %}

{% endblock %}