{% extends "base.html" %}
{% block title %}Settings — deepl-i18n{% endblock %}
{% block content %}

<h3 class="page-h">Settings</h3>
<p class="page-sub">
  Edits <code class="code">{{ config_file }}</code>.
  {% if not config_exists %}The file does not exist yet — saving will create it.{% endif %}
  Changes take effect immediately after saving, no restart needed.
</p>

{% if config_error %}
  <div class="notice err" style="margin-bottom: 22px">
    <div class="ico">!</div>
    <div>
      <div class="nt">config.json is broken</div>
      <div class="nm">{{ config_error }} — the UI will not overwrite it. Please repair it by hand first.</div>
    </div>
  </div>
{% endif %}

<!-- DeepL-Zugang -->
<div class="setgrp">
  <h4 class="sec-h">DeepL access</h4>
  <div class="stack">
    <div class="card">
      <div class="frow">
        <div class="fk">API key<small>Written to <code class="code">.env</code> — never to config.json, which usually ends up in the repo.</small></div>
        <div>
          <div class="keyline" id="key-status">
            {% if key_found %}
              <span class="badge badge-ok"><span class="d"></span>found</span>
              <span class="muted">Source: {{ key_source }}</span>
            {% else %}
              <span class="badge badge-warn"><span class="d"></span>not found</span>
              <span class="muted">neither DEEPL_API_KEY nor .env</span>
            {% endif %}
          </div>
          <div class="keyline" id="key-masked" style="margin-top: 10px" {% if not key_found %}hidden{% endif %}>
            DEEPL_API_KEY = <span id="key-masked-val">{{ key_masked }}</span></div>
          <div style="display: flex; gap: 10px; margin-top: 12px">
            <input class="input" id="f-api-key" type="password" autocomplete="off" style="flex: 1"
              placeholder="{% if key_found %}Set a new key (overwrites the .env){% else %}Paste your key here{% endif %}">
            <button class="btn btn-ghost" type="button" id="btn-save-key">Save key</button>
          </div>
          <div id="key-msg" class="fielderr" hidden></div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="frow">
        <div class="fk">Quota<small>Live query against DeepL — free, does not count towards your character limit.</small></div>
        <div>
          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap">
            <button class="btn btn-ghost btn-sm" type="button" id="btn-quota" {% if not key_found %}disabled{% endif %}>
              ↻ Query
            </button>
            <span class="muted" style="font-size: 11.5px" id="quota-updated">
              {% if not key_found %}Needs an API key.{% else %}not queried yet{% endif %}
            </span>
          </div>
          <div id="quota-detail" hidden>
            <div class="quota-bar"><div class="quota-fill" id="quota-fill" style="width: 0%"></div></div>
            <div class="quota-lbl">
              <span id="quota-used"></span>
              <span id="quota-rest"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Uebersetzung -->
<div class="setgrp">
  <h4 class="sec-h">Translation</h4>
  <div class="card">
    <div class="frow">
      <div class="fk">Source language<small>source_lang</small></div>
      <div>
        <input class="input" id="f-source-lang" list="source-lang-list" style="max-width: 200px" value="{{ cfg.source_lang }}">
        {# Eigene Liste: DeepL akzeptiert als Quelle kein EN-US/PT-BR, nur EN/PT. #}
        <datalist id="source-lang-list">{% for l in source_languages %}<option value="{{ l }}">{% endfor %}</datalist>
        <div class="muted" style="font-size: 11.5px; margin-top: 6px">{{ source_languages_source }}</div>
      </div>
    </div>

    <div class="frow">
      <div class="fk">Target languages<small>output_languages</small></div>
      <div>
        <div class="lchips" id="lang-chips"></div>
      </div>
    </div>

    <div class="frow">
      <div class="fk">Formality<small>global or per language</small></div>
      <div>
        <div class="seg-mini" id="formality-mode">
          <button type="button" data-mode="global">Global</button>
          <button type="button" data-mode="perLang">Per language</button>
        </div>
        <div id="formality-global" style="margin-top: 12px">
          <select class="select" id="f-formality" style="max-width: 220px">
            {% for f in formalities %}<option value="{{ f }}">{{ f }}</option>{% endfor %}
          </select>
        </div>
        <div class="perlang" id="formality-perlang" hidden></div>
      </div>
    </div>

    <div class="frow">
      <div class="fk">Model type<small>model_type</small></div>
      <div>
        <select class="select" id="f-model-type" style="max-width: 260px">
          <option value="">default (DeepL decides)</option>
          {% for m in model_types %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
        </select>
      </div>
    </div>

    <div class="frow">
      <div class="fk">File format<small>file_format</small></div>
      <div>
        <select class="select" id="f-file-format" style="max-width: 220px">
          <option value="">auto (from the extension)</option>
          {% for f in formats %}<option value="{{ f }}">{{ f }}</option>{% endfor %}
        </select>
      </div>
    </div>

    <div class="frow">
      <div class="fk">Context<small>context — steers DeepL's tone &amp; terminology</small></div>
      <div>
        <textarea class="textarea" id="f-context" rows="3"
          placeholder="e.g. UI strings of a sports app. Tone: casual, informal.">{{ cfg.context }}</textarea>
      </div>
    </div>
  </div>
</div>

<!-- Erweitert -->
<div class="setgrp">
  <h4 class="sec-h">Advanced</h4>
  <div class="card">
    <div class="frow">
      <div class="fk">Placeholder pattern<small>placeholder_pattern (Python regex). Matches are excluded from translation.</small></div>
      <div>
        <input class="input" id="f-placeholder" value="{{ cfg.placeholder_pattern }}">
        <div class="fielderr" id="ph-error" hidden></div>
        <div class="field" style="margin: 12px 0 0">
          <label class="lbl" for="f-ph-test">Test text</label>
          <input class="input" id="f-ph-test" value="Hi {{ '{{ name }}' }}, you have {{ '{{ count }}' }} new messages.">
        </div>
        <div class="ph-out">
          <span class="muted" style="font-size: 12px">Detected placeholders</span>
          <div class="ph-tags" id="ph-tags"></div>
        </div>
      </div>
    </div>

    <div class="frow">
      <div class="fk">Glossary<small>glossary — path to a .json/.csv/.tsv file</small></div>
      <div>
        <input class="input" id="f-glossary" value="{{ cfg.glossary or '' }}" placeholder="e.g. glossary.csv (empty = no glossary)">
        {% if glossary_error %}
          <div class="fielderr">{{ glossary_error }}</div>
        {% elif glossary_path %}
          <div class="gloss" style="margin-top: 14px">
            <div>
              <div class="gn">{{ glossary_entries }}</div>
              <div class="muted" style="font-size: 12px">entries in total</div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>

    <div class="frow">
      <div class="fk">Filename overrides<small>filename_overrides — language code → filename without extension</small></div>
      <div>
        <div class="perlang" id="override-rows"></div>
        <button class="btn btn-ghost btn-sm mt10" type="button" id="btn-add-override">+ Override</button>
      </div>
    </div>
  </div>
</div>

<!-- Targets -->
<div class="setgrp">
  <h4 class="sec-h">Targets</h4>
  <div class="card">
    <div id="target-rows"></div>
    <button class="btn btn-ghost btn-sm mt14" type="button" id="btn-add-target">+ Add target</button>
  </div>
</div>

<div class="setfoot">
  <span class="savemsg" id="save-msg"></span>
  <button class="btn btn-ghost" type="button" id="btn-reset">Discard</button>
  <button class="btn" type="button" id="btn-save">Save</button>
</div>

<script id="settings-state" type="application/json">{{ state|tojson }}</script>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='settings.js') }}"></script>
{% endblock %}