<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minerva – Anmeldung</title>
<link rel="stylesheet" href="/static/vendor/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="/static/vendor/fontawesome/css/solid.min.css">
<link rel="stylesheet" href="/static/vendor/fontawesome/css/regular.min.css">
<link rel="stylesheet" href="/static/app.css?v={{ v() }}">
</head>
<body>
<div class="auth">
  <section class="auth__side">
    <h1><img class="auth__logo" src="/static/symbol.png" alt=""> Minerva</h1>
    <p class="auth__slogan">Alles für Arbeit und Kreativität an einem Ort.</p>
    <p>Projekte planen, im Team arbeiten, Arbeit finden und vergeben – mit
       Agenten, die die Routine übernehmen, damit du Ziele setzt und den
       Überblick behältst. Lokal von Haus aus: Verbindungen nach außen nur,
       wenn du sie einschaltest.</p>
    <ul class="auth__list auth__wege">
      <li><i class="fa-solid fa-laptop"></i>
          <a href="/install#desktop"><b>Desktop-App herunterladen</b></a> –
          alles auf dem eigenen Rechner, ohne Anmeldung</li>
      <li><i class="fa-solid fa-globe"></i>
          <a href="#" id="zur-registrierung"><b>Im Browser starten</b></a> –
          Konto anlegen und sofort loslegen</li>
      <li><i class="fa-solid fa-server"></i>
          <a href="/install#server"><b>Selbst betreiben</b></a> –
          Dienst für das ganze Haus, mit Docker in Minuten</li>
    </ul>
    <ul class="auth__list">
      <li><i class="fa-solid fa-chart-gantt"></i> Netzplan, Kanban, Kalender und Tagesplan aus denselben Daten</li>
      <li><i class="fa-solid fa-sitemap"></i> Organisationen mit vererbten Rollen; Arbeit, Freelance und Persönliches getrennt</li>
      <li><i class="fa-solid fa-handshake"></i> Börse für Arbeit und Aufträge, mit Profilen</li>
      <li><i class="fa-solid fa-robot"></i> Assistent, Berichte und Agenten mit einem lokalen Sprachmodell</li>
      <li><i class="fa-solid fa-puzzle-piece"></i> Erweiterungen nach Bedarf – Chat, Agenten-Zentrale, Konnektoren, Mail</li>
    </ul>
  </section>

  <section class="auth__form">
    <div class="auth__box">
      <h2>Willkommen</h2>
      <p class="sub">Anmelden{% if registrierung_offen() or einladung %} oder in einer Minute ein Konto anlegen{% endif %}.</p>

      {% if einladung %}
        <div class="note"><i class="fa-solid fa-envelope-open-text"></i> Du wurdest zu <b>{{ einladung }}</b> eingeladen.
          Melde dich an oder lege ein Konto an – danach bist du im Team.</div>
      {% endif %}
      {% if fehler %}<div class="alert"><i class="fa-solid fa-triangle-exclamation"></i> {{ fehler }}</div>{% endif %}

      <div class="tabs" role="tablist">
        <button type="button" role="tab" id="tab-login"
                aria-selected="{{ 'false' if modus == 'register' else 'true' }}">Anmelden</button>
        {% if registrierung_offen() or einladung %}
        <button type="button" role="tab" id="tab-register"
                aria-selected="{{ 'true' if modus == 'register' else 'false' }}">Registrieren</button>
        {% endif %}
      </div>

      <form method="post" action="/login" id="form-login"
            {% if modus == 'register' %}hidden{% endif %}>
        <label for="l-user">Benutzername oder E-Mail</label>
        <input id="l-user" name="username" type="text" required autocomplete="username">
        <label for="l-pass">Passwort</label>
        <input id="l-pass" name="password" type="password" required
               autocomplete="current-password">
        <button class="btn btn--primary btn--wide" type="submit"><i class="fa-solid fa-right-to-bracket"></i> Anmelden</button>
      </form>

      {% if registrierung_offen() or einladung %}
      <form method="post" action="/register" id="form-register"
            {% if modus != 'register' %}hidden{% endif %}>
        <label for="r-user">Benutzername</label>
        <input id="r-user" name="username" type="text" required minlength="3" maxlength="40"
               autocomplete="username">
        <label for="r-name">Anzeigename (optional)</label>
        <input id="r-name" name="full_name" type="text" maxlength="120"
               autocomplete="name">
        <label for="r-mail">E-Mail</label>
        <input id="r-mail" name="email" type="email" required autocomplete="email">
        <label for="r-pass">Passwort (mindestens 8 Zeichen)</label>
        <input id="r-pass" name="password" type="password" required minlength="8"
               autocomplete="new-password">
        <button class="btn btn--primary btn--wide" type="submit"><i class="fa-solid fa-user-plus"></i> Konto anlegen</button>
      </form>
      {% else %}
      <p class="muted">Die Registrierung ist auf dieser Installation geschlossen –
         neue Konten entstehen über einen Einladungslink.</p>
      {% endif %}
    </div>
  </section>
</div>
<script>
  const tabs = { login: document.getElementById('tab-login'),
                 register: document.getElementById('tab-register') };
  const formulare = { login: document.getElementById('form-login'),
                      register: document.getElementById('form-register') };
  const zeige = (name) => {
    for (const [n, k] of Object.entries(tabs)) {
      if (!k) continue;
      k.setAttribute('aria-selected', String(n === name));
      formulare[n].hidden = n !== name;
    }
    formulare[name].querySelector('input').focus();
  };
  for (const [name, knopf] of Object.entries(tabs)) {
    if (knopf) knopf.addEventListener('click', () => zeige(name));
  }
  const zurRegistrierung = document.getElementById('zur-registrierung');
  zurRegistrierung.addEventListener('click', (e) => {
    e.preventDefault();
    zeige(tabs.register ? 'register' : 'login');
  });
</script>
</body>
</html>
