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

{# auth/two-step-basic — faithful port of src/html/auth/two-step-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 %}
  <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);" x-data="axOtpForm()">

      <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>

      <section class="ax-card" role="region" aria-label="Two-step verification" 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);">

          <header style="text-align:center;display:flex;flex-direction:column;gap:var(--ax-space-3);align-items:center;">
            <span class="ax-center" aria-hidden="true"
                  style="inline-size:56px;block-size:56px;border-radius:var(--ax-radius-pill);background:var(--ax-accent-wash);color:var(--ax-accent);">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="26" height="26"><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"/><path d="M11 11a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M12 12l0 2.5"/></svg>
            </span>
            <div style="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;">Two-step verification</h1>
              <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">We sent a 6-digit code to <b style="color:var(--ax-text-strong);">+1 ••• ••• 4072</b>.</p>
            </div>
          </header>

          <div role="alert" x-show="invalid" 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 code. Please check the code and try again.</p></div>
          </div>

          <form @submit.prevent="verify()" style="display:flex;flex-direction:column;gap:var(--ax-space-5);" novalidate>
            <div>
              <div class="ax-otp" role="group" aria-label="Enter the 6-digit verification code"
                   style="display:flex;justify-content:space-between;gap:var(--ax-space-2);" @paste.prevent="onPaste($event)">
                <!-- :style uses the OBJECT form, not a string: Alpine merges an object
                     into the element's inline style but replaces it wholesale for a
                     string — the '' branch was wiping flex:1 1 0, so the cells kept
                     .ax-otp__cell's fixed 44px and ran off the edge of a 360px screen. -->
                <template x-for="(d, i) in digits" :key="i">
                  <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1"
                         class="ax-otp__cell" style="flex:1 1 0;min-inline-size:0;font-weight:600;"
                         :style="invalid ? { borderColor: 'var(--ax-danger-500)' } : {}"
                         :aria-label="'Digit ' + (i+1) + ' of 6'"
                         :data-idx="i" x-model="digits[i]"
                         @input="onInput(i, $event)" @keydown="onKey(i, $event)" @focus="$event.target.select()">
                </template>
              </div>
            </div>

            <label class="ax-check" style="font-size:var(--ax-text-sm);color:var(--ax-text);">
              <input type="checkbox" class="ax-checkbox" x-model="trust">
              <span>Trust this device for 30 days</span>
            </label>

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

          <div class="ax-center" style="flex-direction:column;gap:var(--ax-space-2);">
            <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
              Didn't get a code?
              <button type="button" class="ax-btn ax-btn--link" :disabled="cooldown>0" @click="resend()" style="font-size:var(--ax-text-sm);vertical-align:baseline;">
                <span x-text="cooldown>0 ? ('Resend in ' + cooldown + 's') : 'Resend code'"></span>
              </button>
            </p>
            <a class="ax-link" href="/auth/sign-in-basic/" style="font-size:var(--ax-text-sm);">Use a different method</a>
          </div>
        </div>
      </section>
    </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 o = ['EN','FR','DE','ES','AR']; this.locale = o[(o.indexOf(this.locale)+1)%o.length]; try { localStorage.setItem('ax:lang', this.locale); } catch (e) {} },
      };
    }
    function axOtpForm() {
      return {
        digits: ['', '', '', '', '', ''], trust: false,
        loading: false, invalid: false, cooldown: 0, _deadline: 0, _raf: 0,
        get complete() { return this.digits.every((d) => /^\d$/.test(d)); },
        cells() { return Array.from(this.$root.querySelectorAll('.ax-otp__cell')); },
        focusCell(i) { const c = this.cells()[i]; if (c) { c.focus(); c.select(); } },
        onInput(i, e) {
          this.invalid = false;
          const v = e.target.value.replace(/\D/g, '');
          this.digits[i] = v.slice(-1) || '';
          if (this.digits[i] && i < 5) this.focusCell(i + 1);
        },
        onKey(i, e) {
          if (e.key === 'Backspace' && !this.digits[i] && i > 0) { e.preventDefault(); this.digits[i - 1] = ''; this.focusCell(i - 1); }
          else if (e.key === 'ArrowLeft' && i > 0) { e.preventDefault(); this.focusCell(i - 1); }
          else if (e.key === 'ArrowRight' && i < 5) { e.preventDefault(); this.focusCell(i + 1); }
        },
        onPaste(e) {
          const txt = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, 6);
          if (!txt) return;
          this.invalid = false;
          for (let i = 0; i < 6; i++) this.digits[i] = txt[i] || '';
          this.focusCell(Math.min(txt.length, 5));
        },
        verify() {
          if (!this.complete) return;
          this.loading = true;
          this.invalid = false;
          // Demo only — never hits the network. "111111" passes; anything else flashes invalid.
          setTimeout(() => {
            this.loading = false;
            if (this.digits.join('') === '111111') {
              window.location.href = '/';
            } else {
              this.invalid = true;
              this.digits = ['', '', '', '', '', ''];
              this.focusCell(0);
            }
          }, 900);
        },
        resend() { if (this.cooldown > 0) return; this.startCooldown(); },
        startCooldown() {
          this._deadline = Date.now() + 30000;
          const tick = () => {
            const left = Math.max(0, Math.ceil((this._deadline - Date.now()) / 1000));
            this.cooldown = left;
            if (left > 0) this._raf = requestAnimationFrame(tick);
          };
          cancelAnimationFrame(this._raf);
          tick();
        },
        init() { this.startCooldown(); this.$nextTick(() => this.focusCell(0)); },
      };
    }
  </script>
{% endblock %}