{% extends "base.html" %}
{% block title %}Sign In · Fun Fair{% endblock %}
{% block body %}
<div class="login-root">

  <!-- Left panel — desktop only -->
  <div class="login-left" style="position:relative; overflow:hidden; padding:0; background:#D6D0C4;">
    <img src="/static/img/mzcet1.webp" alt="MZCET Event" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center;" />
  </div>

  <!-- Right panel — login form -->
  <div class="login-right" style="padding-top:5vh;">
    <div style="width:100%; max-width:420px;">

      <div style="display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:28px;">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#DF9D5B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="drawably-logo">
          <path d="M11 6 L3 2 M8 12 L1 12 M11 18 L3 22" />
        </svg>
        <h1 style="font-size:36px; font-weight:900; color:#2E2A50; margin:0; letter-spacing:-0.5px;">FUN FAIR</h1>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#DF9D5B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="drawably-logo">
          <path d="M13 6 L21 2 M16 12 L23 12 M13 18 L21 22" />
        </svg>
      </div>

      <div id="login-card" class="app-card" style="padding:28px; --drawably-stroke:#B8B0C8;">

        <div id="kicked-alert" class="hidden" style="margin-bottom:16px;">
          <div style="display:flex; align-items:center; gap:8px;">
            <span id="kicked-icon"></span> You were signed out — this account was logged in on another device.
          </div>
        </div>

        <!-- Role Tabs -->
        <div style="display:flex; gap:6px; background:#E8E6DE; border-radius:12px; padding:5px; margin-bottom:24px;" id="role-tabs">
          <button type="button" class="role-tab-btn" data-role="student" style="flex:1; padding:10px 6px; font-size:13px; display:flex; align-items:center; justify-content:center; gap:5px;">
            <span class="role-icon"></span> Student/Staff
          </button>
          <button type="button" class="role-tab-btn" data-role="stall" style="flex:1; padding:10px 6px; font-size:13px; display:flex; align-items:center; justify-content:center; gap:5px;">
            <span class="role-icon"></span> Stall
          </button>
          <button type="button" class="role-tab-btn" data-role="admin" style="flex:1; padding:10px 6px; font-size:13px; display:flex; align-items:center; justify-content:center; gap:5px;">
            <span class="role-icon"></span> Admin
          </button>
        </div>

        <form id="login-form">
          <div style="margin-bottom:16px;">
            <label id="username-label" for="login-username" class="field-label">SPR Number/Emp ID</label>
            <div id="username-wrap"><input required type="text" name="username" id="login-username" autocomplete="username" placeholder="Enter your SPR Number/Emp ID" style="--drawably-paper:#ECEAE2; --drawably-stroke:#D8D4C8;" /></div>
          </div>
          <div style="margin-bottom:22px;">
            <label for="login-password" class="field-label">Password</label>
            <div id="password-wrap"><input required type="password" name="password" id="login-password" autocomplete="current-password" placeholder="••••••••" style="--drawably-paper:#ECEAE2; --drawably-stroke:#D8D4C8;" /></div>
          </div>

          <div id="login-error" class="hidden" style="margin-bottom:16px;">
            <div style="display:flex; align-items:center; gap:8px;"><span id="error-icon"></span> <span id="login-error-text"></span></div>
          </div>

          <div id="submit-wrap">
            <button type="submit" id="login-submit" style="width:100%; height:48px; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; --drawably-fill:#DF9D5B; color:#2E2A50;">
              <span id="submit-label">Sign In</span> <span id="submit-icon"></span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script type="module" src="/static/js/login.js"></script>
{% endblock %}