{% extends "base.html" %}
{% block title %}Sign in{% endblock %}
{% block style %}
  /* Operator, 2026-10-26: the Portal's front door — what it is on the
     left, the form on the right; one column on a phone. */
  /* A slow-moving navy-to-blue background, this page only. */
  body { background: linear-gradient(120deg, #0f2a47, #12355b 35%,
                                     #1d4f86 65%, #1565c0);
         background-size: 220% 220%; animation: drift 18s ease infinite; }
  @keyframes drift { 0%, 100% { background-position: 0% 50%; }
                     50% { background-position: 100% 50%; } }
  footer.foot { background: rgba(255, 255, 255, .92); }
  .auth { display: grid; grid-template-columns: 5fr 6fr; max-width: 860px;
          margin: 40px auto; background: var(--panel); border-radius: 16px;
          overflow: hidden; box-shadow: 0 24px 60px rgba(4, 20, 40, .35);
          animation: rise .5s ease both; }
  .auth-brand { background: var(--navy); color: #dbe5f1; padding: 40px 34px;
                display: flex; flex-direction: column; gap: 22px;
                position: relative; overflow: hidden; }
  /* Two soft circles drifting behind the brand. */
  .auth-brand::before, .auth-brand::after { content: ""; position: absolute;
    border-radius: 50%; background: rgba(255, 255, 255, .07); }
  .auth-brand::before { width: 220px; height: 220px; right: -70px; top: -60px;
                        animation: float 9s ease-in-out infinite; }
  .auth-brand::after { width: 150px; height: 150px; left: -50px; bottom: -40px;
                       background: rgba(21, 101, 192, .35);
                       animation: float 11s ease-in-out infinite reverse; }
  @keyframes float { 0%, 100% { transform: translate(0, 0); }
                     50% { transform: translate(-18px, 22px); } }
  .auth-brand > * { position: relative; z-index: 1; }
  .auth-brand .big { display: inline-grid; place-items: center; width: 56px;
                     height: 56px; border-radius: 16px; background: #fff;
                     color: var(--navy); font-size: 19px; font-weight: 800;
                     animation: ring 2.8s ease-out infinite; }
  @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
                    70%, 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
  .auth-brand h1 { color: #fff; font-size: 28px; margin: 0; line-height: 1.2; }
  .auth-brand ul { list-style: none; margin: 0; padding: 0;
                   display: grid; gap: 14px; }
  .auth-brand li { display: flex; gap: 12px; align-items: center;
                   animation: slide .5s ease both; }
  .auth-brand li:nth-child(1) { animation-delay: .15s; }
  .auth-brand li:nth-child(2) { animation-delay: .3s; }
  .auth-brand li:nth-child(3) { animation-delay: .45s; }
  @keyframes slide { from { transform: translateX(-16px); }
                     to { transform: none; } }
  .auth-brand li .dot { flex: none; display: inline-grid; place-items: center;
                        width: 30px; height: 30px; border-radius: 9px;
                        background: rgba(255, 255, 255, .12); color: #fff;
                        font-size: 14px; }
  .auth-brand li b { color: #fff; }
  .auth-brand .foot-note { margin-top: auto; font-size: 12px; color: #8fa3bb; }
  .auth-form { padding: 40px 38px; display: flex; flex-direction: column;
               justify-content: center; }
  .auth-form h2 { font-size: 24px; margin: 0 0 22px; }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-weight: 600; margin-bottom: 6px;
                 font-size: 13px; }
  .field .box { display: flex; align-items: center; border: 1px solid #c9d2de;
                border-radius: 8px; background: var(--panel);
                transition: border-color .15s, box-shadow .15s; }
  .field .box:focus-within { border-color: var(--accent);
                             box-shadow: 0 0 0 3px rgba(21, 101, 192, .15); }
  .field .ic { padding: 0 4px 0 12px; color: var(--muted); font-size: 15px; }
  .field input { flex: 1; border: 0; padding: 11px 10px; min-width: 0;
                 background: transparent; outline: none; }
  .field button.eye { background: transparent; border: 0; color: var(--accent);
                      font-weight: 600; font-size: 12px; padding: 0 12px; }
  .field button.eye:hover { background: transparent; text-decoration: underline; }
  #caps { color: var(--review); font-size: 12px; margin-top: 6px; }
  .auth-form button[type="submit"] { width: 100%; padding: 12px 14px;
                                     font-size: 15px; border-radius: 8px;
                                     margin-top: 4px; position: relative;
                                     overflow: hidden;
                                     transition: transform .15s, box-shadow .15s; }
  .auth-form button[type="submit"]:hover { transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(21, 101, 192, .35); }
  /* A light sweep across the button on hover. */
  .auth-form button[type="submit"]::after { content: ""; position: absolute;
    top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent,
                                rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg); }
  .auth-form button[type="submit"]:hover::after { left: 120%;
                                                  transition: left .6s ease; }
  .auth-form .rules { margin-top: 18px; padding-top: 14px;
                      border-top: 1px solid var(--line); }
  @media (max-width: 760px) {
    .auth { grid-template-columns: 1fr; margin: 8px 0; }
    .auth-brand, .auth-form { padding: 24px 20px; }
    .auth-brand ul { display: none; }
  }
{% endblock %}
{% block content %}
<div class="auth">
  <section class="auth-brand">
    <span class="big" aria-hidden="true">CV</span>
    <h1>Charge Validation</h1>
    <ul>
      <li><span class="dot" aria-hidden="true">✓</span><b>Charge conditions</b></li>
      <li><span class="dot" aria-hidden="true">▦</span><b>Pass, Fail, Review</b></li>
      <li><span class="dot" aria-hidden="true">◷</span><b>Every run recorded</b></li>
    </ul>
    <p class="foot-note">Ecare India · {{ mode }} mode</p>
  </section>
  <section class="auth-form">
    <h2>Sign in</h2>
    {% if error %}<div class="msg bad" role="alert">{{ error }}</div>{% endif %}
    {% if no_users %}<div class="msg bad">No Portal Users yet. On this PC run
      <code>python tools\add_portal_user.py</code> to add the first Admin.</div>{% endif %}
    <form method="post" action="/signin" autocomplete="off">
      <input type="hidden" name="token" value="{{ run_token }}">
      <input type="hidden" name="next" value="{{ next_url }}">
      <div class="field">
        <label for="username">Username</label>
        <div class="box"><span class="ic" aria-hidden="true">👤</span><input id="username" name="username" autocomplete="username" required autofocus></div>
      </div>
      <div class="field">
        <label for="pw">Password</label>
        <div class="box"><span class="ic" aria-hidden="true">🔒</span><input id="pw" name="password" type="password" autocomplete="current-password" required><button type="button" class="eye" id="pw-toggle" aria-controls="pw" aria-pressed="false">Show</button></div>
        <div id="caps" role="status" hidden>Caps Lock is on</div>
      </div>
      <button type="submit">Sign in</button>
    </form>
    <p class="note rules">Signed out after {{ idle_minutes }} minutes idle.
      {{ lock_after }} wrong passwords lock the account for
      {{ lock_minutes }} minutes. Forgot it? An Admin can reset it.</p>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const pw = $('pw'), eye = $('pw-toggle'), caps = $('caps');
  eye.addEventListener('click', () => {
    const show = pw.type === 'password';
    pw.type = show ? 'text' : 'password';
    eye.textContent = show ? 'Hide' : 'Show';
    eye.setAttribute('aria-pressed', String(show));
    pw.focus();
  });
  const capsCheck = e => {
    if (e.getModifierState) caps.hidden = !e.getModifierState('CapsLock');
  };
  pw.addEventListener('keydown', capsCheck);
  pw.addEventListener('keyup', capsCheck);
  pw.addEventListener('blur', () => { caps.hidden = true; });
})();
</script>
{% endblock %}