{% extends "base.html" %}
{% block content %}
  <h1>{{ t('form_payment', number=inv.number) }}</h1>
  <form class="card" method="post">
    {% if hint %}
    {# The linked Zimmerbelegung rows may already say how it was paid. Offer it, never apply it by
       itself: an issued invoice only changes by a deliberate click. #}
    <div class="field">
      <label>{{ t('lbl_payment_from_ledger') }}</label>
      <div>
        {% if hint.dates %}{{ t('col_paid_date') }}: {{ hint.dates|map('date')|join(', ') }}{% endif %}
        {% if hint.payers %} · {{ t('col_payer') }}: {{ hint.payers|join(', ') }}{% endif %}
        <button class="btn secondary" type="button" id="takeover"
                data-date="{{ hint.paid_date or '' }}" data-method="{{ hint.payment_method or '' }}"
        >{{ t('btn_take_over') }}</button>
      </div>
    </div>
    {% endif %}
    <div class="grid2">
      <div class="field"><label>{{ t('lbl_paid_date') }}</label>
        <input type="date" name="paid_date" value="{{ inv.paid_date or '' }}" autofocus></div>
      <div class="field"><label>{{ t('lbl_payment_method') }}</label>
        <input type="text" name="payment_method" value="{{ inv.payment_method or '' }}"></div>
    </div>
    <div class="formactions">
      <button class="btn" type="submit">{{ t('btn_save') }}</button>
      <a class="btn secondary" href="{{ url_for('invoice_view', invoice_id=inv.id) }}">{{ t('btn_cancel') }}</a>
    </div>
  </form>
  <script>
    const t = document.getElementById("takeover");
    if (t) t.addEventListener("click", function () {
      if (t.dataset.date) document.querySelector("[name=paid_date]").value = t.dataset.date;
      if (t.dataset.method) document.querySelector("[name=payment_method]").value = t.dataset.method;
    });
  </script>
{% endblock %}