{% extends "base.html" %}
{% block title %}MAX Bridge{% endblock %}
{% block content %}
<div class="container">
  <div class="card">
    <div style="font-size:36px;margin-bottom:8px;">🔔</div>
    <h1>MAX Bridge</h1>
    <p>Уведомления из MAX в Telegram или браузер.</p>
    <hr class="divider">
    <label>Ваш ключ (5 цифр)</label>
    <div class="row" style="margin-bottom:8px;">
      <input type="text" id="access_key" placeholder="12345" maxlength="5" inputmode="numeric" style="margin:0;font-size:22px;letter-spacing:4px;text-align:center;">
      <button class="btn btn-primary btn-sm" onclick="enterKey()">Войти</button>
    </div>
    <p id="key_error" style="color:#d93030;font-size:13px;display:none;margin-bottom:8px;">❌ Ключ не найден</p>
    <hr class="divider">
    <a href="setup" class="btn btn-green">➕ Привязать MAX</a>
  </div>
</div>
<script>
async function enterKey() {
  const key = document.getElementById('access_key').value.trim();
  if (key.length !== 5) return;
  const res = await fetch('/api/check-key?key=' + key);
  const data = await res.json();
  if (data.ok) location.href = '/dashboard/' + key;
  else document.getElementById('key_error').style.display = 'block';
}
document.getElementById('access_key').addEventListener('keydown', e => { if (e.key==='Enter') enterKey(); });
</script>
{% endblock %}