<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CANCOM Simple Signage Admin</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<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-4">Signage Admin</h2>

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

            <form method="post">
              <div class="mb-3">
                <label class="form-label">E-Mail / Benutzername</label>
                <input class="form-control" name="username" placeholder="admin" required>
              </div>
              <div class="mb-3">
                <label class="form-label">Passwort</label>
                <input type="password" class="form-control" name="password" required>
              </div>
              <button class="btn btn-primary w-100">Login</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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