{% extends "base.html" %}

{% block content %}
<div class="container narrow">
  
  <div class="login-box">
    <div class="login-header">
      <div class="login-icon">🥨</div>
      <h1>Anmeldung</h1>
      <p class="login-sub">
        Portal: <strong>{{ tenant.name }}</strong>
      </p>
      <div class="privacy-note">
        🔒 Aus Datenschutzgründen (DSGVO) sind Bestelllisten und Teilnehmerdaten nur für angemeldete Teammitglieder sichtbar.
      </div>
    </div>

    {% if error %}
    <div class="alert-error">
      {{ error }}
    </div>
    {% endif %}

    {% if success %}
    <div class="alert-success">
      {{ success }}
    </div>
    {% endif %}

    {% if tenant and tenant.slug == 'demo' %}
    <!-- Demo Switch & Credentials Box -->
    <div class="demo-toggle-wrapper">
      <button type="button" class="btn-demo-toggle" id="btnToggleDemo" onclick="toggleDemoBox()">
        <span id="demoToggleIcon">🧪</span> <span id="demoToggleText">Demo-Zugangsdaten einblenden</span>
      </button>
    </div>

    <div id="demoCredentialsBox" class="demo-credentials-card" style="display: none;">
      <div class="demo-card-header">
        <strong>🧪 Demo-Zugangsdaten (Klick auf „Ausfüllen“):</strong>
      </div>
      <div class="demo-creds-list">
        <div class="demo-cred-item">
          <div>
            <span class="badge-role admin">👨‍🍳 Admin</span>
            <code>admin@waiswuaschd.de</code>
            <span class="text-muted" style="font-size: 0.8rem;">(PW: <code>admin123</code>)</span>
          </div>
          <button type="button" class="btn-fill-small" onclick="fillCredentials('admin@waiswuaschd.de', 'admin123')">
            ✍️ Ausfüllen
          </button>
        </div>

        <div class="demo-cred-item">
          <div>
            <span class="badge-role">👤 Mitarbeiter</span>
            <code>maxi@waiswuaschd.de</code>
            <span class="text-muted" style="font-size: 0.8rem;">(PW: <code>demo123</code>)</span>
          </div>
          <button type="button" class="btn-fill-small" onclick="fillCredentials('maxi@waiswuaschd.de', 'demo123')">
            ✍️ Ausfüllen
          </button>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Login Form -->
    <form action="/login" method="POST" id="formLogin" class="auth-form">
      <div class="input-group">
        <label for="login_email">E-Mail-Adresse</label>
        <input type="email" id="login_email" name="email" required placeholder="name@firma.de" autocomplete="username">
      </div>
      <div class="input-group">
        <label for="login_password">Passwort</label>
        <input type="password" id="login_password" name="password" required placeholder="••••••••" autocomplete="current-password">
      </div>
      <button type="submit" class="btn-submit">Anmelden</button>
    </form>

    {% if allow_guests %}
    <div style="text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);">
      <p class="card-hint" style="margin-bottom: 8px;">Nur zu Besuch oder für eine Runde eingeladen?</p>
      <a href="/" class="btn-secondary" style="width: 100%; text-align: center; display: block;">
        🥨 Als Gast mitbestellen (ohne Registrierung)
      </a>
    </div>
    {% endif %}

    <div class="invite-notice-card">
      <div class="invite-icon">✉️</div>
      <div>
        <strong>Neu im Team?</strong><br>
        <small class="text-muted">
          Registrierungen sind nur auf Einladung möglich. Wende dich an deinen Team-Organisator, um einen persönlichen Einladungslink zu erhalten.
        </small>
      </div>
    </div>

  </div>

</div>

<script>
  function fillCredentials(email, pw) {
    const emailInput = document.getElementById('login_email');
    const pwInput = document.getElementById('login_password');
    emailInput.value = email;
    pwInput.value = pw;
    emailInput.focus();
    emailInput.style.boxShadow = '0 0 0 2px var(--accent)';
    pwInput.style.boxShadow = '0 0 0 2px var(--accent)';
    setTimeout(() => {
      emailInput.style.boxShadow = '';
      pwInput.style.boxShadow = '';
    }, 1000);
  }

  function toggleDemoBox() {
    const box = document.getElementById('demoCredentialsBox');
    const text = document.getElementById('demoToggleText');
    const icon = document.getElementById('demoToggleIcon');
    if (box.style.display === 'none' || !box.style.display) {
      box.style.display = 'block';
      text.innerText = 'Demo-Hilfe ausblenden (Reale Firmenansicht)';
      icon.innerText = '🏢';
      localStorage.setItem('schmankerl_show_demo', '1');
    } else {
      box.style.display = 'none';
      text.innerText = 'Demo-Zugangsdaten einblenden';
      icon.innerText = '🧪';
      localStorage.setItem('schmankerl_show_demo', '0');
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    if (localStorage.getItem('schmankerl_show_demo') === '1') {
      const box = document.getElementById('demoCredentialsBox');
      const text = document.getElementById('demoToggleText');
      const icon = document.getElementById('demoToggleIcon');
      if (box && text && icon) {
        box.style.display = 'block';
        text.innerText = 'Demo-Hilfe ausblenden (Reale Firmenansicht)';
        icon.innerText = '🏢';
      }
    }
  });
</script>
{% endblock %}