import { h } from "./jsx";
import { Header } from "./components/Header";
import { Footer } from "./components/Footer";
import { PWAHead } from "./components/PWAHead";
import { FIRM } from "./branding";

export function renderLogin(loginJs: string): string {
  return "<!DOCTYPE html>" + (
    <html lang="de">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <meta name="theme-color" content="#BFF355" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <PWAHead />
        <title data-i18n="login.title">Anmelden &mdash; Paliad</title>
        <link rel="stylesheet" href="/assets/global.css" />
      </head>
      <body>
        <Header />

        <main className="login-main">
          <div className="login-card">
            <div className="login-tabs">
              <button className="login-tab active" data-tab="login" data-i18n="login.tab.login">Anmelden</button>
              <button className="login-tab" data-tab="register" data-i18n="login.tab.register">Registrieren</button>
            </div>

            <form className="login-form" id="login-form">
              <label htmlFor="login-email" className="login-label" data-i18n="login.email">E-Mail</label>
              <input type="email" id="login-email" name="email" placeholder="name@hlc.com" required autofocus autocomplete="email" className="login-input" />
              <label htmlFor="login-password" className="login-label" data-i18n="login.password">Passwort</label>
              <input type="password" id="login-password" name="password" placeholder="Passwort" data-i18n-placeholder="login.password.placeholder" required autocomplete="current-password" className="login-input" />
              <button type="submit" className="login-button" data-i18n="login.submit">Anmelden</button>
            </form>

            <form className="login-form" id="register-form" style="display:none">
              <label htmlFor="reg-email" className="login-label" data-i18n="login.email">E-Mail</label>
              <input type="email" id="reg-email" name="email" placeholder="name@hlc.com" required autocomplete="email" className="login-input" />
              <label htmlFor="reg-password" className="login-label" data-i18n="login.password">Passwort</label>
              <input type="password" id="reg-password" name="password" placeholder="Mind. 8 Zeichen" data-i18n-placeholder="login.minchars" required minlength="8" autocomplete="new-password" className="login-input" />
              <label htmlFor="reg-confirm" className="login-label" data-i18n="login.confirm">Passwort best&auml;tigen</label>
              <input type="password" id="reg-confirm" name="confirm" placeholder="Passwort wiederholen" data-i18n-placeholder="login.confirm.placeholder" required minlength="8" autocomplete="new-password" className="login-input" />
              <button type="submit" className="login-button" data-i18n="login.register.submit">Registrieren</button>
            </form>

            <p className="login-hint" data-i18n="login.hint">{`Nur f\u00FCr autorisierte ${FIRM}-E-Mail-Adressen.`}</p>
          </div>
        </main>

        <Footer />

        <script src={`/assets/${loginJs}`}></script>
      </body>
    </html>
  );
}
