#pragma once

const char ESP_LOGIN_HTML[] PROGMEM = R"HTML(
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>SASA ESP RFID Login</title>
  <style>
    :root{--bg:#131416;--top:#282B2F;--line:#2A2D32;--line2:#343942;--text:#E6EBF2;--muted:#8D96A3;--blue:#4797FF;--blue2:#006EFF;--blueHover:#05254D;--green:#2FA252;--greenSoft:rgba(47,162,82,.13);--red:#EE6368;--redDark:#5C1F21;--blueSoft:rgba(71,151,255,.12);--r:6px;--r2:8px;--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
    *{box-sizing:border-box}
    html,body{min-height:100%}
    body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:12px;line-height:1.35;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    button,input{font-family:inherit;font-size:12px}

    .app{min-height:100vh;display:grid;grid-template-rows:auto 1fr;background:var(--bg)}

    .topbar{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;background:var(--top)}
    .brand{display:flex;align-items:center;gap:9px;min-width:0}
    .mark{width:22px;height:22px;display:grid;place-items:center;border-radius:var(--r);background:var(--blue2);color:#fff;font-weight:560;font-size:12px;letter-spacing:-.03em;flex:0 0 auto}
    .brandText{min-width:0}
    .brandText h1{margin:0;font-size:13px;line-height:1.1;color:#F3F6FA;font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .brandText .sub{margin-top:2px;font-size:11px;color:#AAB2BD;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    .shell{min-height:calc(100vh - 44px);display:grid;place-items:center;padding:10px}
    .card{width:min(400px,100%);border:1px solid var(--line);border-radius:var(--r2);background:transparent;overflow:hidden}

    .cardHead{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;border-bottom:1px solid var(--line)}
    .cardHead h2{margin:0;color:#F3F6FA;font-size:12px;font-weight:500}
    .cardHead .hint{color:var(--muted);font-size:11px;font-weight:400;white-space:nowrap}

    form{display:grid}
    .formBody{padding:11px;display:grid;gap:12px}
    label{display:block;color:#E6ECF4;font-weight:450;font-size:12px}
    .labelText{display:block;margin-bottom:5px}

    input{width:100%;border:1px solid #343942;background:#111214;color:#E9EEF6;border-radius:var(--r);padding:8px 9px;min-height:32px;outline:none;font-weight:400}
    input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(71,151,255,.12)}

    button{border:1px solid rgba(71,151,255,.86);background:transparent;color:var(--blue);border-radius:var(--r);padding:7px 10px;min-height:30px;cursor:pointer;font-weight:450;transition:background .12s ease,border-color .12s ease,color .12s ease}
    button:hover{background:var(--blueHover);border-color:var(--blue);color:#fff}
    button:disabled{opacity:.55;cursor:not-allowed}

    .actions{padding:10px 11px;border-top:1px solid var(--line)}
    .actions button{width:100%}

    .notice{border-radius:var(--r);padding:9px 11px;border:1px solid var(--line2);background:transparent;color:#DCE5EF;font-weight:400;display:none}
    .notice.error{display:block;background:var(--redDark);border-color:rgba(238,99,104,.42);color:#FFD7DF}
    .notice.success{display:block;background:var(--greenSoft);border-color:rgba(47,162,82,.36);color:#D9FFE8}

    @media(max-width:520px){
      .topbar{height:auto;min-height:44px;padding:9px 10px}
      .shell{place-items:start center}
      .cardHead{padding:10px 11px}
    }
  </style>
</head>
<body>
  <div class="app">
    <header class="topbar">
      <div class="brand">
        <div class="mark">S</div>
        <div class="brandText">
          <h1>SASA ESP RFID</h1>
          <div class="sub">Local reader dashboard</div>
        </div>
      </div>
    </header>

    <main class="shell">
      <section class="card">
        <div class="cardHead">
          <h2>Sign In</h2>
          <span class="hint">ESP local session</span>
        </div>

        <form id="loginForm">
          <div class="formBody">
            <div id="notice" class="notice"></div>

            <label>
              <span class="labelText">Username</span>
              <input name="username" autocomplete="username" autofocus required>
            </label>

            <label>
              <span class="labelText">Password</span>
              <input name="password" type="password" autocomplete="current-password" required>
            </label>
          </div>

          <div class="actions">
            <button id="loginButton" type="submit">Sign In</button>
          </div>
        </form>
      </section>
    </main>
  </div>

<script>
const form=document.getElementById('loginForm'),notice=document.getElementById('notice'),button=document.getElementById('loginButton');

function showNotice(text,type='error'){
  notice.className='notice '+type;
  notice.textContent=text;
}

form.onsubmit=async e=>{
  e.preventDefault();

  const data=Object.fromEntries(new FormData(form).entries());

  button.disabled=true;
  button.textContent='Signing in...';
  notice.className='notice';
  notice.textContent='';

  try{
    const r=await fetch('/api/login',{
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify(data),
      cache:'no-store'
    });

    const text=await r.text();

    if(!r.ok)throw new Error(text||'Login failed');

    showNotice('Signed in. Opening dashboard...','success');
    window.location.href='/';
  }catch(err){
    showNotice(err.message||'Login failed','error');
  }finally{
    button.disabled=false;
    button.textContent='Sign In';
  }
};
</script>
</body>
</html>
)HTML";