{% extends 'pages/auth/_standalone.html' %}

{# auth/sign-in-basic — faithful port of src/html/auth/sign-in-basic.html
   Standalone off-app page (no sidebar/header). Same DOM/classes/ARIA,
   same demo copy, same Alpine helpers. Reference hrefs converted to
   clean Django routes (# -> /x/, index -> /). #}


{% block auth_body %}
  <!-- ════ OFF-APP TOOLS (theme + locale, fixed top-right) ════ -->
  <div class="ax-cluster" x-data="axOffappTools()"
       style="position:fixed;inset-block-start:var(--ax-space-5);inset-inline-end:var(--ax-space-5);z-index:5;gap:var(--ax-space-2);">
    <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" @click="cycleLocale()" aria-label="Change language">
      <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M3.6 9h16.8"/><path d="M3.6 15h16.8"/><path d="M11.5 3a17 17 0 0 0 0 18"/><path d="M12.5 3a17 17 0 0 1 0 18"/></svg>
      <span class="ax-btn__label ax-num" x-text="locale"></span>
    </button>
    <button type="button" class="ax-icon-btn" @click="toggleTheme()" :aria-pressed="theme==='dark'" aria-label="Toggle dark mode">
      <svg class="ax-icon" x-show="theme==='dark'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true"><path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"/></svg>
      <svg class="ax-icon" x-show="theme!=='dark'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008"/></svg>
    </button>
  </div>

  <main class="ax-center" id="ax-main" style="inline-size:100%;max-inline-size:400px;position:relative;z-index:1;">
    <div style="inline-size:100%;display:flex;flex-direction:column;gap:var(--ax-space-5);">

      <!-- ════ BRAND ════ -->
      <a href="/" class="ax-center" aria-label="Vireo home"
         style="gap:var(--ax-space-3);text-decoration:none;flex-direction:row;justify-content:center;">
        <span class="ax-center" aria-hidden="true"
              style="inline-size:42px;block-size:42px;border-radius:var(--ax-radius-md);background:var(--ax-gradient-accent);color:var(--ax-on-accent);box-shadow:0 8px 22px -8px rgba(var(--ax-accent-rgb),.7);">
          <svg viewBox="0 0 32 32" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="axmk0" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#2BC4B0"/><stop offset="0.55" stop-color="#1E9E96"/><stop offset="1" stop-color="#6D5CF0"/></linearGradient></defs><path d="M4 4 H16 A12 12 0 0 1 28 16 V28 A0 0 0 0 1 28 28 H16 A12 12 0 0 1 4 16 V4 Z" fill="url(#axmk0)" stroke="none"/><circle cx="20.5" cy="11.5" r="2.6" fill="#0A0C11" fill-opacity="0.92" stroke="none"/></svg>
        </span>
        <span style="font-family:var(--ax-font-display);font-weight:var(--ax-weight-semibold);font-size:var(--ax-text-xl);color:var(--ax-text-strong);letter-spacing:-.01em;">Vireo</span>
      </a>

      <!-- ════ AUTH CARD ════ -->
      <section class="ax-card" role="region" aria-label="Sign in" x-data="axAuthForm()"
               style="border-radius:var(--ax-radius-xl);">
        <div class="ax-card__body" style="padding:var(--ax-space-8);display:flex;flex-direction:column;gap:var(--ax-space-5);">

          <!-- heading -->
          <header style="text-align:center;display:flex;flex-direction:column;gap:var(--ax-space-1);">
            <h1 style="margin:0;font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);letter-spacing:-.015em;">Sign in</h1>
            <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Welcome back — sign in to your workspace.</p>
          </header>

          <!-- social -->
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--ax-space-2);">
            <button type="button" class="ax-btn ax-btn--secondary" aria-label="Continue with Google">
              <svg class="ax-btn__icon" viewBox="0 0 48 48" aria-hidden="true"><path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/><path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/><path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/><path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/></svg>
            </button>
            <button type="button" class="ax-btn ax-btn--secondary" aria-label="Continue with Apple">
              <svg class="ax-btn__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M16.365 1.43c0 1.14-.493 2.27-1.177 3.08-.744.9-1.99 1.57-2.987 1.57-.12 0-.23-.02-.3-.03-.01-.06-.04-.22-.04-.39 0-1.15.572-2.27 1.206-2.98.804-.94 2.142-1.64 3.248-1.68.03.13.05.28.05.43zm4.565 15.71c-.03.07-.463 1.58-1.518 3.12-.945 1.34-1.94 2.71-3.43 2.71-1.517 0-1.9-.88-3.63-.88-1.698 0-2.302.91-3.67.91-1.377 0-2.332-1.26-3.428-2.8-1.287-1.82-2.323-4.63-2.323-7.28 0-4.28 2.797-6.55 5.552-6.55 1.448 0 2.675.95 3.6.95.865 0 2.222-1.01 3.902-1.01.613 0 2.886.06 4.374 2.19-.13.09-2.383 1.37-2.383 4.19 0 3.26 2.854 4.42 2.955 4.45z"/></svg>
            </button>
            <button type="button" class="ax-btn ax-btn--secondary" aria-label="Continue with GitHub">
              <svg class="ax-btn__icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12z"/></svg>
            </button>
          </div>

          <!-- divider -->
          <div class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;">
            <hr class="ax-divider" style="flex:1 1 auto;" aria-hidden="true">
            <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);white-space:nowrap;">or continue with email</span>
            <hr class="ax-divider" style="flex:1 1 auto;" aria-hidden="true">
          </div>

          <!-- global error -->
          <div role="alert" x-show="error" x-cloak x-transition class="ax-alert ax-alert--danger" style="padding:var(--ax-space-3) var(--ax-space-4);">
            <svg class="ax-alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
            <div class="ax-alert__content"><p class="ax-alert__message" style="color:var(--ax-danger-500);">Incorrect email or password. Please try again.</p></div>
          </div>

          <!-- form -->
          <form class="ax-stack" @submit.prevent="submit()" style="display:flex;flex-direction:column;gap:var(--ax-space-4);" novalidate>
            <div class="ax-field">
              <label class="ax-label" for="si-email">Email or username</label>
              <input id="si-email" type="text" class="ax-input" autocomplete="username" placeholder="you@vireo.io"
                     x-model="email" :class="emailErr && 'is-invalid'" :aria-invalid="emailErr ? 'true' : 'false'" aria-describedby="si-email-msg" required>
              <p id="si-email-msg" class="ax-field__message ax-field__message--error" x-show="emailErr" x-cloak x-text="emailErr"></p>
            </div>

            <div class="ax-field">
              <div class="ax-cluster" style="justify-content:space-between;">
                <label class="ax-label" for="si-pass">Password</label>
                <a class="ax-link" href="/auth/reset-password-basic/" style="font-size:var(--ax-text-xs);">Forgot password?</a>
              </div>
              <div class="ax-field__control">
                <input id="si-pass" class="ax-input ax-input--with-trailing" autocomplete="current-password" placeholder="••••••••••"
                       :type="reveal ? 'text' : 'password'" x-model="password" :class="passErr && 'is-invalid'" :aria-invalid="passErr ? 'true' : 'false'" aria-describedby="si-pass-msg" required>
                <button type="button" class="ax-field__affix ax-field__affix--trailing ax-field__affix--button" @click="reveal=!reveal" :aria-pressed="reveal" :aria-label="reveal ? 'Hide password' : 'Show password'">
                  <svg x-show="!reveal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
                  <svg x-show="reveal" x-cloak viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"/><path d="M3 3l18 18"/></svg>
                </button>
              </div>
              <p id="si-pass-msg" class="ax-field__message ax-field__message--error" x-show="passErr" x-cloak x-text="passErr"></p>
            </div>

            <label class="ax-check" style="font-size:var(--ax-text-sm);color:var(--ax-text);">
              <input type="checkbox" class="ax-checkbox" x-model="remember">
              <span>Keep me signed in</span>
            </label>

            <button type="submit" class="ax-btn ax-btn--primary ax-btn--lg ax-btn--block" :class="loading && 'is-loading'" :aria-busy="loading">
              <span class="ax-btn__spinner" aria-hidden="true"></span>
              <span class="ax-btn__label">Sign in</span>
            </button>
          </form>

          <p style="text-align:center;margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
            New to Vireo? <a class="ax-link" href="/auth/sign-up-basic/" style="font-weight:var(--ax-weight-medium);">Create an account</a>
          </p>
        </div>
      </section>

      <p style="text-align:center;margin:0;font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">
        By continuing you agree to the <a class="ax-link" href="/pages/terms/">Terms</a> and <a class="ax-link" href="/pages/privacy/">Privacy Policy</a>.
      </p>
    </div>
  </main>

  
{% endblock %}

{% block auth_scripts %}
  <script>
    function axOffappTools() {
      return {
        theme: document.documentElement.getAttribute('data-ax-theme') || 'light',
        locale: (localStorage.getItem('ax:lang') || 'EN').toUpperCase(),
        toggleTheme() {
          this.theme = this.theme === 'dark' ? 'light' : 'dark';
          document.documentElement.setAttribute('data-ax-theme', this.theme);
          try { localStorage.setItem('ax:theme', this.theme); } catch (e) {}
        },
        cycleLocale() {
          const order = ['EN', 'FR', 'DE', 'ES', 'AR'];
          this.locale = order[(order.indexOf(this.locale) + 1) % order.length];
          try { localStorage.setItem('ax:lang', this.locale); } catch (e) {}
        },
      };
    }
    function axAuthForm() {
      return {
        email: '', password: '', remember: false, reveal: false,
        emailErr: '', passErr: '', error: false, loading: false,
        validate() {
          this.emailErr = !this.email.trim()
            ? 'Enter your email or username.'
            : (this.email.includes('@') && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.email.trim()) ? 'Enter a valid email address.' : '');
          this.passErr = !this.password ? 'Enter your password.' : '';
          return !this.emailErr && !this.passErr;
        },
        submit() {
          this.error = false;
          if (!this.validate()) return;
          this.loading = true;
          // Demo only — never hits the network. Simulates a wrong-credential response.
          setTimeout(() => { this.loading = false; this.error = true; }, 900);
        },
      };
    }
  </script>
{% endblock %}