{% 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') }}
        <div class="password-input-wrap">
          <input type="password" name="group_password" required data-password-input />
          <button
            type="button"
            class="password-toggle"
            data-password-toggle
            aria-label="{{ t('show_password') }}"
            title="{{ t('show_password') }}"
            hidden
          >
            <svg class="icon-eye icon-eye-open" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M2 12c2.7-4.2 6-6.3 10-6.3s7.3 2.1 10 6.3c-2.7 4.2-6 6.3-10 6.3S4.7 16.2 2 12z" />
              <circle cx="12" cy="12" r="3.1" />
            </svg>
            <svg class="icon-eye icon-eye-closed" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M3 3l18 18" />
              <path d="M2.4 12c1.1-1.8 2.4-3.2 4-4.3" />
              <path d="M9.4 6.2a9 9 0 0 1 2.6-.4c4 0 7.3 2.1 10 6.3a16.2 16.2 0 0 1-3 3.6" />
              <path d="M14.7 14.7a3.8 3.8 0 0 1-5.4-5.4" />
            </svg>
          </button>
        </div>
      </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) {
      const storageKey = "login_privacy_banner_v1_ack";
      if (localStorage.getItem(storageKey) === "1") {
        banner.hidden = true;
      } else {
        acceptBtn.addEventListener("click", () => {
          localStorage.setItem(storageKey, "1");
          banner.hidden = true;
        });
      }
    }

    const passwordInput = document.querySelector("[data-password-input]");
    const passwordToggle = document.querySelector("[data-password-toggle]");
    if (!passwordInput || !passwordToggle) return;

    const labelShow = "{{ t('show_password') }}";
    const labelHide = "{{ t('hide_password') }}";

    const syncState = () => {
      const hasValue = passwordInput.value.length > 0;
      passwordToggle.hidden = !hasValue;
      passwordToggle.classList.toggle("is-visible", hasValue);
      if (!hasValue) {
        passwordInput.type = "password";
        passwordToggle.setAttribute("aria-label", labelShow);
        passwordToggle.setAttribute("title", labelShow);
        passwordToggle.classList.remove("is-active");
      }
    };

    passwordToggle.addEventListener("click", () => {
      const showPassword = passwordInput.type === "password";
      passwordInput.type = showPassword ? "text" : "password";
      const label = showPassword ? labelHide : labelShow;
      passwordToggle.setAttribute("aria-label", label);
      passwordToggle.setAttribute("title", label);
      passwordToggle.classList.toggle("is-active", showPassword);
    });

    passwordInput.addEventListener("input", syncState);
    syncState();
  })();
</script>
{% endblock %}
