<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Connexion</title>
    <style>
      body { font-family: system-ui, -apple-system, Arial; display:flex; align-items:center; justify-content:center; height:100vh; }
      .card { width:320px; padding:20px; border-radius:8px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
      .error { color: #b00020; margin-bottom:12px }
      label { display:block; margin-top:8px }
      input { width:100%; padding:8px; margin-top:4px }
      button { margin-top:12px; padding:8px 12px }
    </style>
  </head>
  <body>
    <div class="card">
      <h2>Connexion requise</h2>
      <% if (error) { %>
        <div class="error"><%= error %></div>
      <% } %>
      <% if (hosts && hosts.length > 1) { %>
        <p>Choisissez l'application à ouvrir :</p>
        <ul>
          <% hosts.forEach(function(h) { %>
            <li><a href="/login/<%= h.id %>"><%= h.id %> (<%= h.pathPrefix %>)</a></li>
          <% }) %>
        </ul>
      <% } else if (hosts && hosts.length === 1 && hosts[0].oidc) { %>
        <p>Redirection vers le fournisseur OIDC...</p>
      <% } else {
        // render local form for non-OIDC
      %>
      <form method="post" action="/login/<%= (hosts && hosts[0]) ? hosts[0].id : '' %>">
        <label>Utilisateur
          <input name="username" required autocomplete="username" />
        </label>
        <label>Mot de passe
          <input name="password" type="password" required autocomplete="current-password" />
        </label>
        <div>
          <button type="submit">Se connecter</button>
        </div>
      </form>
      <% } %>
    </div>
  </body>
  </html>
