{% extends 'base.html' %}
{% block content %}
<div class="login-layout">
  <section class="card login-shell">
    <header class="login-intro">
      <h1>{{ t('subtitle') }}</h1>
      <p>{{ t('login_note') }}</p>
    </header>
    <hr class="login-divider" />
    <h2 class="login-title">{{ t('login') }}</h2>
    <form method="post" action="{{ url_for('login') }}" class="form-grid">
      <label>
        {{ t('group_name') }}
        <input type="text" name="group_name" required />
      </label>

      <label>
        {{ t('group_password') }}
        <input type="password" name="group_password" required />
      </label>

      <button class="btn" type="submit">{{ t('login_submit') }}</button>
    </form>
  </section>
</div>
<aside class="login-privacy-banner" data-login-privacy-banner>
  <p class="login-privacy-title">{{ t('login_privacy_title') }}</p>
  <p class="login-privacy-text">
    {{ t('login_privacy_text') }}
    <a href="{{ url_for('datenschutz') }}">{{ t('privacy') }}</a>
  </p>
  <button class="btn login-privacy-btn" type="button" data-login-privacy-accept>{{ t('login_privacy_accept') }}</button>
</aside>
<script>
  (() => {
    const banner = document.querySelector("[data-login-privacy-banner]");
    const acceptBtn = document.querySelector("[data-login-privacy-accept]");
    if (!banner || !acceptBtn) return;
    const storageKey = "login_privacy_banner_v1_ack";
    if (localStorage.getItem(storageKey) === "1") {
      banner.hidden = true;
      return;
    }
    acceptBtn.addEventListener("click", () => {
      localStorage.setItem(storageKey, "1");
      banner.hidden = true;
    });
  })();
</script>
{% endblock %}
