<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sicherheitscode eingeben - CANCOM Signage</title>
  <link rel="stylesheet"
        href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  {% include "_styles.html" %}
  <script>
  (() => {
    const stored = window.localStorage.getItem("signage-theme");
    const theme = stored === "dark" || stored === "light" ? stored : "light";
    document.documentElement.setAttribute("data-bs-theme", theme);
  })();
  </script>
</head>
<body>
<div class="page">

{% include "_header.html" %}

<div class="page-wrapper d-flex align-items-center justify-content-center">
  <div class="container-xl">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <div class="card card-md">
          <div class="card-body">
            <h2 class="text-center mb-2">Sicherheitscode</h2>
            <p class="text-center text-muted mb-4">Gib den 6-stelligen Code aus deiner Authenticator-App ein.</p>

            {% if error %}
            <div class="alert alert-danger text-center" role="alert">{{ error }}</div>
            {% endif %}

            <form method="post">
              <div class="mb-3">
                <input type="text" name="code" class="form-control form-control-lg text-center"
                       placeholder="000000" inputmode="numeric" autocomplete="one-time-code"
                       maxlength="6" pattern="[0-9]{6}" required autofocus>
              </div>
              <button class="btn btn-primary w-100 mb-2" type="submit">Bestätigen</button>
            </form>

            <p class="text-center text-muted mt-3 small">
              <a href="#" onclick="document.getElementById('recovery-form').style.display='block';this.style.display='none';return false;">
                Code verloren?
              </a>
            </p>
            <form id="recovery-form" method="post" style="display:none;">
              <input type="hidden" name="action" value="recovery">
              <div class="mb-2">
                <label class="form-label">Recovery-Code eingeben</label>
                <input type="text" name="code" class="form-control" placeholder="ABCD-123">
              </div>
              <button class="btn btn-warning w-100" type="submit">Mit Recovery-Code anmelden</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% include "_footer.html" %}
</div>
</body>
</html>