{% extends "admin/onboarding/base.html" %}
{% block title %}Sicherheit{% endblock %}

{% block content %}
<h1>Sicherheitsschlüssel</h1>
<p class="lead">
  Diese Schlüssel wurden automatisch für deinen Server generiert.
  Du musst sie <strong>nicht</strong> aufschreiben — außer dem Bootstrap-Secret (rot markiert).
</p>

{% if error %}
  <div class="alert alert-error">{{ error }}</div>
{% endif %}

<div style="margin-bottom: 16px;">
  <label>CRAWLER_KEY</label>
  <div class="secret-box">{{ crawler_key }}</div>
  <p style="font-size:12px; color:var(--muted); margin-top:4px;">
    Schützt den Spielplan-Crawler-Endpunkt gegen unberechtigte Aufrufe.
  </p>
</div>

<div style="margin-bottom: 16px;">
  <label>SECRET_KEY</label>
  <div class="secret-box">{{ secret_key }}</div>
  <p style="font-size:12px; color:var(--muted); margin-top:4px;">
    Verschlüsselt die Browser-Sessions. Wird automatisch gesetzt.
  </p>
</div>

<div style="margin-bottom: 20px;">
  <label>BOOTSTRAP_SECRET</label>
  <div class="secret-box highlight" id="bootstrap-box">{{ bootstrap_secret }}</div>
  <p style="font-size:12px; color:#ff7b72; margin-top:4px;">
    ⚠️ Notiere diesen Wert <strong>jetzt</strong> — er wird danach nicht mehr angezeigt.
    Du brauchst ihn nur wenn du den Admin-Zugang verlierst.
  </p>
  <button type="button" class="btn btn-ghost" style="margin-top:8px; font-size:12px;"
          onclick="copyBootstrap()">
    Kopieren
  </button>
  <span id="copy-hint" style="font-size:12px; color:var(--success); margin-left:8px; display:none;">
    Kopiert!
  </span>
</div>

<form method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div class="checkbox-row">
    <input type="checkbox" id="confirmed" name="confirmed" value="1">
    <label for="confirmed">
      Ich habe das Bootstrap-Secret notiert und verstehe, dass es danach nicht mehr sichtbar ist.
    </label>
  </div>

  <div class="btn-row">
    <a href="{{ url_for('onboarding.step_3') }}" class="btn btn-ghost">&larr; Zurück</a>
    <button type="submit" class="btn btn-primary">Weiter &rarr;</button>
  </div>
</form>
{% endblock %}

{% block scripts %}
<script>
function copyBootstrap() {
  const text = document.getElementById('bootstrap-box').textContent.trim();
  navigator.clipboard.writeText(text).then(() => {
    const hint = document.getElementById('copy-hint');
    hint.style.display = 'inline';
    setTimeout(() => hint.style.display = 'none', 2000);
  });
}
</script>
{% endblock %}