<!doctype html>
<html lang="{{LANG_CODE}}" class="h-full">
<head>
  <meta charset="utf-8" />
  <title>{{T_SIGNIN}} — {{T_TITLE}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="/admin/assets/tailwindcss.js"></script>
  <script src="/admin/assets/htmx.min.js"></script>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
  </style>
</head>
<body class="h-full bg-slate-950 text-slate-100 flex items-center justify-center">
  <main class="w-full max-w-sm px-6">
    <div class="text-center mb-8">
      <h1 class="text-2xl font-semibold">{{T_TITLE}}</h1>
      <p class="text-slate-400 text-sm mt-1">{{T_SUBTITLE}}</p>
    </div>

    <form
      class="space-y-4 bg-slate-900 border border-slate-800 rounded-lg p-6 shadow-xl"
      hx-post="/admin/login"
      hx-target="#err"
      hx-swap="innerHTML"
      hx-on::before-swap="
        /* The auth handler returns 401 with an HTML error fragment for
           bad credentials / disabled / not-admin / bad-TOTP. HTMX skips
           the swap on 4xx by default, so force it back on. */
        if (event.detail.xhr.status >= 400 && event.detail.xhr.status < 500) {
          event.detail.shouldSwap = true;
          event.detail.isError = false;
        }
      "
      hx-on::after-request="
        const xhr = event.detail.xhr;
        if (event.detail.successful && (xhr.responseText || '').trim() === '') {
          /* Empty 2xx body = real login. The TOTP-required path returns 2xx
             with an HTML prompt fragment, which we MUST NOT redirect away
             from. */
          window.location.href = '/admin/';
        }
      "
    >
      <div>
        <label class="block text-xs font-medium text-slate-400 mb-1" for="username">{{T_USERNAME}}</label>
        <input
          id="username" name="username" type="text" required autocomplete="username"
          class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-sky-500"
        />
      </div>

      <div>
        <label class="block text-xs font-medium text-slate-400 mb-1" for="password">{{T_PASSWORD}}</label>
        <input
          id="password" name="password" type="password" required autocomplete="current-password"
          class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-sky-500"
        />
      </div>

      <div id="tfa-section" class="hidden">
        <label class="block text-xs font-medium text-slate-400 mb-1" for="tfaCode">{{T_TOTP_LABEL}}</label>
        <input
          id="tfaCode" name="tfaCode" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code"
          class="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-sm tracking-widest text-center focus:outline-none focus:border-sky-500"
        />
        <input id="secret" name="secret" type="hidden" />
      </div>

      <button
        type="submit"
        class="w-full bg-sky-600 hover:bg-sky-500 text-white text-sm font-medium rounded px-4 py-2 transition"
      >
        {{T_SIGNIN}}
      </button>

      <div id="err" class="text-sm text-rose-400 min-h-[1.25em]"></div>
    </form>

    <!-- OIDC providers (rendered only when /admin/oidc/providers is non-empty) -->
    <div id="oidc-block" class="mt-6 hidden">
      <div class="flex items-center gap-3 mb-3">
        <div class="flex-1 h-px bg-slate-800"></div>
        <span class="text-xs text-slate-500">{{T_OR}}</span>
        <div class="flex-1 h-px bg-slate-800"></div>
      </div>
      <div id="oidc-buttons" class="space-y-2"></div>
    </div>

    <div class="mt-6 text-center">
      <label class="text-[10px] uppercase tracking-wide text-slate-600 mr-2">{{T_LANGUAGE}}</label>
      <select
        class="bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300"
        onchange="document.cookie='admin_lang='+this.value+'; path=/; max-age=31536000; samesite=strict'; window.location.reload();"
      >
        <option value="en"{{LANG_SEL_EN}}>English</option>
        <option value="de"{{LANG_SEL_DE}}>Deutsch</option>
        <option value="es"{{LANG_SEL_ES}}>Español</option>
        <option value="fr"{{LANG_SEL_FR}}>Français</option>
        <option value="ro"{{LANG_SEL_RO}}>Română</option>
      </select>
    </div>
  </main>

  <script>
    // Fetch enabled providers and render one button each. The button just
    // navigates to /admin/login/oidc/<name>, which 302s the browser to the
    // IdP. After the IdP redirects to /oidc/callback, the server sets our
    // session cookie and redirects to /admin/.
    var SIGNIN_WITH = {{T_SIGNIN_WITH_JSON}};
    fetch('/admin/oidc/providers').then(r => r.json()).then(list => {
      if (!Array.isArray(list) || list.length === 0) return;
      const block = document.getElementById('oidc-block');
      const root  = document.getElementById('oidc-buttons');
      list.forEach(p => {
        const a = document.createElement('a');
        a.href = '/admin/login/oidc/' + encodeURIComponent(p.name);
        a.className = 'block w-full text-center bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm rounded px-4 py-2 transition';
        a.textContent = SIGNIN_WITH + ' ' + (p.display_name || p.name);
        root.appendChild(a);
      });
      block.classList.remove('hidden');
    }).catch(() => { /* silently hide block on any error */ });
  </script>
</body>
</html>
