{% extends 'base.html' %}
{% block title %}Staff login - Student Smart Portal{% endblock %}
{% block content %}
<section class="card login-card" style="max-width:520px;margin:28px auto;">
  <div class="portal-mode-pill local"><span class="dot local-dot"></span> <strong>Classroom Offline Server</strong> · Local Mode</div>
  <div class="eyebrow" style="font-size:0.78rem;font-weight:700;color:#2456a9;letter-spacing:0.08em;margin-top:6px;">STAFF ACCESS</div>
  <h1 style="margin:4px 0 10px;">Sign in</h1>
  <p class="muted" style="line-height:1.5;">Administrator and approved teachers can access their classroom attendance and quiz records.</p>
  <form method="post" action="{{ url_for('login') }}" class="form-stack">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label for="username-input" style="font-weight:650;font-size:0.9rem;display:block;margin:12px 0 5px;">Username</label>
    <input id="username-input" name="username" value="{{ username|default(request.form.get('username', '')) }}" required autofocus autocomplete="username" placeholder="e.g. classadmin" style="font-size:16px;">
    
    <label for="password-input" style="font-weight:650;font-size:0.9rem;display:block;margin:12px 0 5px;">Password</label>
    <div class="pw-input-wrapper">
      <input id="password-input" name="password" type="password" required autocomplete="current-password" placeholder="Enter your password" style="font-size:16px;">
      <button type="button" class="pw-toggle-btn" onclick="const p=document.getElementById('password-input');const isP=p.type==='password';p.type=isP?'text':'password';this.textContent=isP?'🔒':'👁';" aria-label="Toggle password visibility" title="Show/Hide password">👁</button>
    </div>
    
    <button class="button primary primary-btn" type="submit" style="margin-top:18px;width:100%;min-height:46px;font-size:1rem;">Sign in</button>
  </form>
  
  <div class="login-guide-note" style="margin-top:18px;padding:14px;background:#f8faff;border:1px solid #dbe5f2;border-radius:12px;font-size:0.88rem;line-height:1.55;">
    <p style="margin:0 0 6px;">📡 <strong>Classroom Wi-Fi Network:</strong> Connect your device to <code>SSP@OUC</code> (192.168.3.x). No internet required.</p>
    <p style="margin:0 0 6px;">👤 <strong>Default local admin:</strong> <code>classadmin</code></p>
    <p class="muted small-text" style="margin:0;">New teacher? Ask an administrator for a private cloud invitation link. Registration is managed online and synced to this server.</p>
  </div>

  <div class="network-mode-switcher">
    <div class="switcher-badge cloud">ONLINE CLOUD</div>
    <div class="switcher-main">
      <div class="switcher-text">
        <strong>At Home or using Mobile Data?</strong>
        <span>Switch to the Cloudflare Online Portal for curricula &amp; quiz authoring</span>
      </div>
      <a href="https://student-smart-portal.ssa-iq.workers.dev/login" class="switcher-btn cloud">Open Cloud Portal →</a>
    </div>
  </div>
</section>
{% endblock %}