{{template "base" .}}
{{define "content"}}
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px">
  <div style="width:100%;max-width:380px">

    <div style="text-align:center;margin-bottom:28px">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#00d4ff" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="display:block;margin:0 auto 12px"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      <div style="font-size:22px;font-weight:600;color:#e2e8f0">CrowdSec Dashy</div>
      <div style="font-size:13px;color:#64748b;margin-top:4px">Sign in to continue</div>
    </div>

    <div style="background:#0d1117;border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:28px">

      {{if .Error}}
      <div style="background:rgba(255,59,59,0.08);color:#ff7b7b;border-left:3px solid #ff3b3b;padding:10px 14px;border-radius:4px;font-size:13px;margin-bottom:20px">
        {{.Error}}
      </div>
      {{end}}

      <form method="POST" action="/login" autocomplete="off" novalidate>
        <div style="margin-bottom:16px">
          <label style="display:block;font-size:12px;font-weight:500;color:#8b949e;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px" for="username">Username</label>
          <input style="display:block;width:100%;background:#111823;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:9px 12px;font-size:14px;color:#e2e8f0;outline:none;box-sizing:border-box"
            type="text" id="username" name="username"
            required autofocus maxlength="128" autocomplete="username" spellcheck="false">
        </div>
        <div style="margin-bottom:22px">
          <label style="display:block;font-size:12px;font-weight:500;color:#8b949e;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px" for="password">Password</label>
          <input style="display:block;width:100%;background:#111823;border:1px solid rgba(255,255,255,0.1);border-radius:6px;padding:9px 12px;font-size:14px;color:#e2e8f0;outline:none;box-sizing:border-box"
            type="password" id="password" name="password"
            required maxlength="128" autocomplete="current-password">
        </div>
        <button type="submit"
          style="display:block;width:100%;background:#00d4ff;color:#080b10;font-size:14px;font-weight:600;border:none;border-radius:6px;padding:10px 0;cursor:pointer;letter-spacing:0.3px">
          Sign in
        </button>
      </form>

    </div>
  </div>
</div>
{{end}}