{# Закрытое тестирование: гостю — одно поле ключа в стеклянном окне.
   Верный ключ кладёт куку на полгода; ссылка /?key=КЛЮЧ делает то же сама. #}
{% extends "auth_glass.html" %}
{% block title %}Puntavia{% endblock %}
{% block form_action %} action="/gate"{% endblock %}
{% block above %}
<div class="s-note">{{ tr('Закрытое тестирование: нужен ключ доступа.') }}</div>
{% endblock %}
{% block hidden %}<input type="hidden" name="next" value="{{ next }}">{% endblock %}
{% block fields %}
<div class="s-inp{{ ' err' if error }}" id="wrapGate">
  <span class="s-lock" aria-hidden="true">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <rect x="4" y="10" width="16" height="11" rx="2.5"/>
      <path d="M8 10V7a4 4 0 0 1 8 0v3"/>
    </svg>
  </span>
  <input id="gate" name="gate_key" autocomplete="off" spellcheck="false"
         autofocus aria-label="{{ tr('Ключ доступа') }}">
  <button class="s-arrow{{ ' shake' if error }}" type="submit" id="go"
          aria-label="OK">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12h13"/><path d="m12 5.5 6.5 6.5-6.5 6.5"/>
    </svg>
  </button>
</div>
{% endblock %}
{% block sso %}{% endblock %}
{% block errtext %}{% if error %}<div class="s-msg">{{ error }}</div>{% endif %}{% endblock %}
{% block links %}<a href="/login">{{ tr('У меня есть учётка — войти') }}</a>{% endblock %}
{% block extra_js %}
<script>
(function(){
  var f = document.getElementById('gate'), go = document.getElementById('go');
  function sync(){ go.classList.toggle('active', f.value.trim().length > 0); }
  f.addEventListener('input', function(){
    document.getElementById('wrapGate').classList.remove('err');
    sync();
  });
  sync();
})();
</script>
{% endblock %}