{% if step == 'done' %}

<div class="form-card" style="max-width:560px;margin:40px auto;text-align:center;padding:40px 32px">
  <div style="font-size:48px;margin-bottom:16px">👋</div>
  <h2 style="margin-bottom:12px">{{ t('delete_account_account_geloescht') }}</h2>
  <p style="color:var(--text-muted);font-size:14px;line-height:1.6">
    {{ t('delete_account_dein_account_wurde_unwiederbringlich') }}
  </p>
  <p style="color:var(--text-muted);font-size:13px;margin-top:14px">
    {{ t('delete_account_schade_dass_du_gehst') }}
  </p>
  <p style="margin-top:24px">
    <a href="{{ url('/index.php') }}" class="btn btn-primary">{{ t('delete_account_zur_startseite') }}</a>
  </p>
</div>

{% else %}

<div class="section-heading">{{ t('delete_account_account_loeschen') }}</div>

<div class="form-card" style="max-width:640px;margin:0 auto">

  <div style="background:#dc262615;border-left:3px solid #dc2626;padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px">
    <strong style="color:#dc2626;font-size:14px">{{ t('delete_account_achtung_diese_aktion_ist') }}</strong>
    <p style="font-size:13px;color:var(--text-muted);margin-top:8px;line-height:1.6">
      {{ t('delete_account_mit_der_loeschung_deines') }}
    </p>
    <ul style="font-size:13px;color:var(--text-muted);margin-top:6px;padding-left:22px;line-height:1.7">
      {# Jeder Punkt ist EIN Satz mit Platzhaltern, kein Satz aus Bruchstuecken.
         Vorher standen hier Textstuecke zwischen den <strong>-Marken; die
         liessen sich nicht uebersetzen, weil eine andere Sprache die Woerter
         anders anordnet. #}
      <li>{{ t('delete_account_punkt_name') | raw }}</li>
      <li>{{ t('delete_account_punkt_profil') | raw }}</li>
      <li>{{ t('delete_account_punkt_beitraege') | raw }}</li>
      <li>{{ t('delete_account_punkt_pn') | raw }}</li>
      <li>{{ t('delete_account_punkt_sonstiges') | raw }}</li>
      <li>{{ t('delete_account_punkt_login') | raw }}</li>
    </ul>
    <p style="font-size:13px;color:var(--text-muted);margin-top:10px;line-height:1.6">
      <strong>{{ t('delete_account_es_gibt_keine_wiederherstellung') }}</strong> {{ t('delete_account_auch_nicht_durch_einen') }}
    </p>
  </div>

  {% if error %}
    <div style="background:#dc262625;border:1px solid #dc2626;color:#fca5a5;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:16px">
      {{ error }}
    </div>
  {% endif %}

  <form method="post" autocomplete="off">
    <input type="hidden" name="csrf" value="{{ csrfToken }}">

    <div class="form-row">
      <label>{{ t('delete_account_dein_passwort') }} <span style="color:#dc2626">*</span></label>
      <input type="password" name="password" required autocomplete="current-password"
             placeholder="Dein aktuelles Passwort">
      <div class="form-hint">
        {{ t('delete_account_zur_sicherheit_bestaetige_deine') }}
      </div>
    </div>

    <div class="form-row">
      <label>{{ t('delete_account_bestaetigung') }} <span style="color:#dc2626">*</span></label>
      <input type="text" name="confirm_text" required autocomplete="off"
             placeholder="{{ t('delete_account_input_placeholder', t('delete_account_confirm_word')) }}">
      <div class="form-hint">
        {{ t('delete_account_wort_eingeben', t('delete_account_loeschen')) | raw }}
      </div>
    </div>

    <div style="display:flex;gap:10px;margin-top:24px">
      <button type="submit" class="btn btn-danger">{{ t('delete_account_meinen_account_endgueltig_loeschen') }}</button>
      <a href="{{ url('/profile.php?id=') }}{{ currentUser.user_id }}" class="btn btn-ghost">{{ t('delete_account_abbrechen') }}</a>
    </div>
  </form>

</div>

{% endif %}