{
    const template = ` <div class="auth-container">
  <div class="auth-card">    
    <div class="tab-navigation">
      <button class="tab-btn active" data-tab="login">Login</button>
      <button class="tab-btn" data-tab="register">Registrieren</button>
    </div>

    <div class="alert alert-danger hidden" role="alert"></div>
    <div class="alert alert-success hidden" role="alert"></div>

    <!-- LOGIN TAB -->
    <form class="auth-form active" data-form="login">
      <div class="form-group">
        <label for="username">Benutzername</label>
        <input type="text" id="username" name="benutzername" required>
      </div>

      <div class="form-group">
        <label for="password">Passwort</label>
        <input type="password" id="password" name="passwort" required>
      </div>

      <button type="submit" class="submit-btn">Anmelden</button>
    </form>

    <!-- REGISTER TAB -->
    <form class="auth-form" data-form="register">
      <div class="form-group">
        <label for="reg-username">Benutzername</label>
        <input type="text" id="reg-username" name="benutzername" minlength="3" maxlength="100" required>
        <small>Min. 3 Zeichen</small>
      </div>

      <div class="form-group">
        <label for="reg-email">E-Mail</label>
        <input type="email" id="reg-email" name="email" required>
      </div>

      <div class="form-group">
        <label for="reg-password">Passwort</label>
        <input type="password" id="reg-password" name="passwort" minlength="6" required>
        <small>Min. 6 Zeichen</small>
      </div>

      <div class="form-group">
        <label for="reg-password-confirm">Passwort wiederholen</label>
        <input type="password" id="reg-password-confirm" name="passwort_wiederholen" minlength="6" required>
      </div>

      <button type="submit" class="submit-btn">Registrieren</button>
    </form>
  </div>
</div> `;
    const css1 = ` :root {
    --backgroundColor: #f2f2f2;
    --headerFontColor: #0570B4;
}

body {
    background-color: var(--backgroundColor);
}

h1,
h2,
h3,
h4 {
    color: var(--headerFontColor);
} `;
    const css2 = ` .auth-container {
  padding: 0;
  max-width: 100%;
}

.auth-card {
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.auth-title {
  text-align: center;
  color: var(--headerFontColor, #0570B4);
  margin-bottom: 16px;
  font-size: 20px;
}

.tab-navigation {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #666;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: var(--headerFontColor, #0570B4);
}

.tab-btn.active {
  color: var(--headerFontColor, #0570B4);
  border-bottom-color: var(--headerFontColor, #0570B4);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--headerFontColor, #0570B4);
  box-shadow: 0 0 0 3px rgba(5, 112, 180, 0.1);
}

.form-group small {
  display: block;
  margin-top: 4px;
  color: #999;
  font-size: 12px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--headerFontColor, #0570B4), rgba(5, 112, 180, 0.8));
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 112, 180, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

.alert {
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert.hidden {
  display: none;
}

.alert-danger {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}

.alert-success {
  background: #efe;
  color: #3c3;
  border: 1px solid #cfc;
} `;
    window.customElements.define(
  'login-form',
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = template;
      this.shadowRoot.adoptedStyleSheets = [css1, css2].map(css => ((sheet => (sheet.replaceSync(css), sheet))(new CSSStyleSheet())));

      this.currentTab = 'login';
      this.setupEventListeners();
    }

    setupEventListeners() {
      const tabBtns = this.shadowRoot.querySelectorAll('.tab-btn');
      const forms = this.shadowRoot.querySelectorAll('.auth-form');
      const alerts = this.shadowRoot.querySelectorAll('.alert');

      tabBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
          const tab = e.target.dataset.tab;
          tabBtns.forEach(b => b.classList.remove('active'));
          forms.forEach(f => f.classList.remove('active'));
          
          e.target.classList.add('active');
          this.shadowRoot.querySelector(`[data-form="${tab}"]`).classList.add('active');
          this.currentTab = tab;
          
          // Clear alerts when switching tabs
          alerts.forEach(a => a.classList.add('hidden'));
        });
      });

      forms.forEach(form => {
        form.addEventListener('submit', (e) => {
          e.preventDefault();
          this.handleSubmit(form);
        });
      });
    }

    async handleSubmit(form) {
      const formData = new FormData(form);
      formData.append('action', this.currentTab);

      const alertError = this.shadowRoot.querySelector('.alert-danger');
      const alertSuccess = this.shadowRoot.querySelector('.alert-success');

      try {
        const response = await fetch('/api/auth/login/', {
          method: 'POST',
          body: formData
        });

        const result = await response.json();

        if (result.success) {
          if (this.currentTab === 'register') {
            // Wechsel zum Login-Tab ohne die Alerts zu löschen
            this.shadowRoot.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === 'login'));
            this.shadowRoot.querySelectorAll('.auth-form').forEach(f => f.classList.toggle('active', f.dataset.form === 'login'));
            this.currentTab = 'login';

            alertError.classList.add('hidden');
            alertSuccess.classList.remove('hidden');
            alertSuccess.textContent = result.data.message;
            form.reset();
          } else {
            window.location.href = result.data.redirect;
          }
        } else {
          alertSuccess.classList.add('hidden');
          alertError.classList.remove('hidden');
          alertError.textContent = result.error;
        }
      } catch (error) {
        alertSuccess.classList.add('hidden');
        alertError.classList.remove('hidden');
        alertError.textContent = 'Ein Fehler ist aufgetreten!';
      }
    }
  }
);}