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

{# auth/two-step-cover — faithful port of src/html/auth/two-step-cover.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 body_style %}padding:0;align-items:stretch;justify-items:stretch;{% endblock %}

{% block auth_body %}
  <style>
    @keyframes ax-spin-local { to { transform: rotate(360deg); } }
    .ax-spin { animation: ax-spin-local 0.7s var(--ax-ease-linear) infinite; }
    @media (min-width: 992px) {
      .ax-auth-cover { grid-template-columns: 52% 48% !important; }
      .ax-auth-cover__panel { display: flex !important; }
    }
    @media (prefers-reduced-motion: reduce) { .ax-spin { animation: none; } }
  </style>

  <!-- ════ OFF-APP TOOLS (theme + locale, fixed top-right) ════ -->
  <div class="ax-cluster" style="position:fixed;inset-block-start:var(--ax-space-5);inset-inline-end:var(--ax-space-6);z-index:5;gap:var(--ax-space-2);">
    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Toggle color theme"
            x-data @click="$store.theme && $store.theme.toggle && $store.theme.toggle()">
      <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="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>
    <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm">
      <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">EN</span>
    </button>
  </div>

  <main class="ax-center" id="ax-main" style="position:relative;z-index:1;min-block-size:100vh;width:100%;">
    <!-- ════ COVER SPLIT ════ -->
    <div class="ax-auth-cover" style="display:grid;grid-template-columns:1fr;width:100%;min-block-size:100vh;">

      <!-- ── LEFT: material still panel (duotone to accent) ── -->
      <aside class="ax-auth-cover__panel" aria-hidden="true"
             style="position:relative;overflow:hidden;display:none;flex-direction:column;justify-content:space-between;padding:var(--ax-space-10);background:
               radial-gradient(120% 120% at 18% 12%, rgba(var(--ax-accent-rgb),.34), transparent 55%),
               radial-gradient(140% 120% at 92% 96%, rgba(var(--ax-accent-rgb),.20), transparent 60%),
               linear-gradient(160deg, var(--ax-surface-solid), var(--ax-accent-wash));">
        <span style="position:absolute;inset:0;background:
               repeating-linear-gradient(135deg, transparent 0 22px, rgba(var(--ax-accent-rgb),.05) 22px 23px);"></span>
        <span style="position:absolute;width:340px;height:340px;border-radius:50%;right:-90px;top:18%;border:1px solid rgba(var(--ax-accent-rgb),.30);"></span>
        <span style="position:absolute;width:220px;height:220px;border-radius:50%;right:10px;top:32%;border:1px solid rgba(var(--ax-accent-rgb),.18);"></span>
        <div class="ax-cluster" style="gap:var(--ax-space-3);position:relative;">
          <span style="display:inline-grid;place-items:center;width:38px;height:38px;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="22" height="22" 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>
          <b style="font-family:var(--ax-font-display);font-size:var(--ax-text-lg);color:var(--ax-text-strong);letter-spacing:-.01em;">Vireo</b>
        </div>
        <div style="position:relative;max-width:30ch;">
          <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ax-accent);margin-block-end:var(--ax-space-4);"><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6"/><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M8 11v-4a4 4 0 1 1 8 0v4"/></svg>
          <p style="font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:600;color:var(--ax-text-strong);line-height:1.3;margin:0;">A second step keeps your workspace yours.</p>
          <p style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);margin-block-start:var(--ax-space-3);">Codes rotate every 30 seconds and never leave your device.</p>
        </div>
      </aside>

      <!-- ── RIGHT: form pane ── -->
      <section class="ax-auth-cover__pane" style="display:grid;place-items:center;padding:var(--ax-space-8) var(--ax-space-6);">
        <div class="ax-card" style="width:100%;max-width:440px;" x-data="twoStep()">
          <div class="ax-card__body" style="padding:var(--ax-space-8);">

            <!-- brand (compact, shown on narrow where panel is hidden) -->
            <div class="ax-cluster" style="gap:var(--ax-space-3);margin-block-end:var(--ax-space-6);">
              <span style="display:inline-grid;place-items:center;width:40px;height:40px;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="23" height="23" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="axmk1" 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(#axmk1)" stroke="none"/><circle cx="20.5" cy="11.5" r="2.6" fill="#0A0C11" fill-opacity="0.92" stroke="none"/></svg>
              </span>
              <b style="font-family:var(--ax-font-display);font-size:var(--ax-text-md);color:var(--ax-text-strong);">Vireo</b>
            </div>

            <h1 style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:600;color:var(--ax-text-strong);margin:0 0 var(--ax-space-2);letter-spacing:-.01em;">Two-step verification</h1>
            <p style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);margin:0 0 var(--ax-space-6);">We sent a 6-digit code to <b class="ax-num" style="color:var(--ax-text);">+1 (•••) •••-4417</b>. Enter it below to continue.</p>

            <!-- error banner (reserved height, no CLS) -->
            <div x-show="error" x-cloak x-transition class="ax-alert ax-alert--danger" role="alert" style="margin-block-end:var(--ax-space-5);">
              <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="M12 9v4"/><path d="M12 16h.01"/><path d="M5.07 19h13.86a2 2 0 0 0 1.73 -3l-6.93 -12a2 2 0 0 0 -3.46 0l-6.93 12a2 2 0 0 0 1.73 3"/></svg>
              <div class="ax-alert__content"><p class="ax-alert__message" x-text="error"></p></div>
            </div>

            <form class="ax-stack" @submit.prevent="verify()" novalidate>
              <!-- OTP -->
              <div>
                <label class="ax-label" style="display:block;margin-block-end:var(--ax-space-3);">Verification code</label>
                <div class="ax-otp" role="group" aria-label="6-digit verification code" :class="{ 'is-invalid': invalid }">
                  <template x-for="(d,i) in digits" :key="i">
                    <input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1"
                           class="ax-otp__cell ax-num" :aria-label="`Digit ${i+1} of 6`"
                           :style="invalid ? { borderColor: 'var(--ax-danger-500)' } : {}"
                           x-model="digits[i]"
                           @input="onInput(i,$event)" @keydown="onKey(i,$event)" @paste="onPaste($event)"
                           :ref="`box${i}`" />
                  </template>
                </div>
                <p x-show="invalid" x-cloak class="ax-field__message ax-error" style="margin-block-start:var(--ax-space-2);">Incorrect code — please re-enter all six digits.</p>
              </div>

              <!-- resend + trust -->
              <div class="ax-cluster ax-cluster--between" style="margin-block-start:var(--ax-space-1);">
                <span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Didn't get it?</span>
                <button type="button" class="ax-btn ax-btn--link ax-btn--sm" :disabled="cooldown>0" @click="resend()">
                  <span x-show="cooldown===0">Resend code</span>
                  <span x-show="cooldown>0" x-cloak class="ax-num">Resend in <span x-text="cooldown"></span>s</span>
                </button>
              </div>

              <label class="ax-cluster" style="gap:var(--ax-space-3);cursor:pointer;margin-block-start:var(--ax-space-1);">
                <input type="checkbox" class="ax-checkbox" x-model="trust" />
                <span style="font-size:var(--ax-text-sm);color:var(--ax-text);">Trust this device for 30 days</span>
              </label>

              <!-- submit -->
              <button type="submit" class="ax-btn ax-btn--primary ax-btn--block" :aria-busy="loading" :disabled="loading" style="margin-block-start:var(--ax-space-3);min-height:44px;">
                <svg x-show="loading" x-cloak class="ax-btn__icon ax-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9"/></svg>
                <span class="ax-btn__label" x-text="loading ? 'Verifying…' : 'Verify'"></span>
              </button>
            </form>

            <div style="margin-block-start:var(--ax-space-5);text-align:center;">
              <a class="ax-link" href="/auth/two-step-basic/" style="font-size:var(--ax-text-sm);">Use a different method</a>
              <span style="color:var(--ax-text-subtle);margin-inline:var(--ax-space-2);">·</span>
              <a class="ax-link" href="/auth/sign-in-basic/" style="font-size:var(--ax-text-sm);">Back to sign in</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>

  
{% endblock %}

{% block auth_scripts %}
  <script>
    function twoStep() {
      return {
        digits: ['','','','','',''], trust:false, loading:false, error:'', invalid:false, cooldown:30, _t:null,
        init(){ this.tick(); this.$nextTick(()=>{ this.$refs.box0 && this.$refs.box0.focus(); }); },
        tick(){ if(this._t) clearInterval(this._t); this._t=setInterval(()=>{ if(this.cooldown>0) this.cooldown--; else clearInterval(this._t); },1000); },
        onInput(i,e){
          const v=e.target.value.replace(/\D/g,'').slice(-1); this.digits[i]=v; this.invalid=false;
          if(v && i<5) this.$refs['box'+(i+1)].focus();
        },
        onKey(i,e){
          if(e.key==='Backspace' && !this.digits[i] && i>0){ this.$refs['box'+(i-1)].focus(); }
          if(e.key==='ArrowLeft' && i>0) this.$refs['box'+(i-1)].focus();
          if(e.key==='ArrowRight' && i<5) this.$refs['box'+(i+1)].focus();
        },
        onPaste(e){
          e.preventDefault();
          const t=(e.clipboardData.getData('text')||'').replace(/\D/g,'').slice(0,6).split('');
          for(let i=0;i<6;i++) this.digits[i]=t[i]||'';
          const last=Math.min(t.length,6)-1; if(last>=0) this.$refs['box'+last].focus();
        },
        resend(){ if(this.cooldown>0) return; this.cooldown=30; this.tick(); this.error=''; this.invalid=false; },
        verify(){
          this.error=''; const code=this.digits.join('');
          if(code.length<6){ this.invalid=true; return; }
          this.loading=true;
          setTimeout(()=>{
            this.loading=false;
            if(code==='123456'){ window.location.href='/'; }
            else { this.invalid=true; this.error='Incorrect code. Please try again.'; this.digits=['','','','','','']; this.$refs.box0.focus(); }
          },650);
        }
      };
    }
  </script>
{% endblock %}