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

{# auth/reset-password-basic — faithful port of src/html/auth/reset-password-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="axResetForm()">

      <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="Reset password" 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);">

          <!-- ── REQUEST STATE ── -->
          <template x-if="!sent">
            <div style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
              <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;">Reset password</h1>
                <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Enter your account email and we'll send a reset link.</p>
              </header>

              <form @submit.prevent="submit()" style="display:flex;flex-direction:column;gap:var(--ax-space-4);" novalidate>
                <div class="ax-field">
                  <label class="ax-label" for="rp-email">Email</label>
                  <div class="ax-field__control">
                    <span class="ax-field__affix ax-field__affix--leading" aria-hidden="true">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"/><path d="M3 7l9 6l9 -6"/></svg>
                    </span>
                    <input id="rp-email" type="email" class="ax-input ax-input--with-leading-icon" autocomplete="email" placeholder="you@vireo.io"
                           x-model="email" :class="emailErr && 'is-invalid'" :aria-invalid="emailErr ? 'true':'false'" aria-describedby="rp-email-msg" required>
                  </div>
                  <p id="rp-email-msg" class="ax-field__message ax-field__message--error" x-show="emailErr" x-cloak x-text="emailErr"></p>
                </div>

                <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">Send reset link</span>
                </button>
              </form>

              <p style="text-align:center;margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
                Remembered it? <a class="ax-link" href="/auth/sign-in-basic/" style="font-weight:var(--ax-weight-medium);">Sign in</a>
              </p>
            </div>
          </template>

          <!-- ── SUCCESS STATE (replaces form) ── -->
          <template x-if="sent">
            <div style="display:flex;flex-direction:column;gap:var(--ax-space-5);text-align:center;">
              <span class="ax-center" aria-hidden="true"
                    style="inline-size:64px;block-size:64px;margin-inline:auto;border-radius:var(--ax-radius-pill);background:var(--ax-success-50);color:var(--ax-success-500);">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" width="30" height="30"><path d="M3 7h3"/><path d="M3 11h2"/><path d="M9.02 8.801l-.6 6a2 2 0 0 0 1.99 2.199h7.98a2 2 0 0 0 1.99 -1.801l.6 -6a2 2 0 0 0 -1.99 -2.199h-7.98a2 2 0 0 0 -1.99 1.801"/><path d="M9.8 7.5l2.982 3.28a3 3 0 0 0 4.238 .202l3.28 -2.982"/></svg>
              </span>
              <div style="display:flex;flex-direction:column;gap:var(--ax-space-2);">
                <h1 style="margin:0;font-family:var(--ax-font-display);font-size:var(--ax-text-xl);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);">Check your inbox</h1>
                <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);line-height:1.55;">We sent a password reset link to <b class="ax-num" style="color:var(--ax-text-strong);" x-text="masked"></b>. The link expires in 30 minutes.</p>
              </div>
              <div class="ax-center" style="flex-direction:column;gap:var(--ax-space-2);">
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--block" :disabled="cooldown>0" @click="resend()">
                  <span class="ax-btn__label" x-text="cooldown>0 ? ('Resend in ' + cooldown + 's') : 'Resend email'"></span>
                </button>
                <a class="ax-btn ax-btn--ghost ax-btn--block" href="/auth/sign-in-basic/">
                  <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="M5 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
                  <span class="ax-btn__label">Back to sign in</span>
                </a>
              </div>
            </div>
          </template>
        </div>
      </section>

      <p style="text-align:center;margin:0;font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">
        Didn't request this? You can safely ignore the email.
      </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 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 axResetForm() {
      return {
        email: '', emailErr: '', loading: false, sent: false, masked: '', cooldown: 0, _deadline: 0, _raf: 0,
        maskEmail(v) {
          const [u, d] = v.split('@');
          if (!d) return v;
          return (u[0] || '') + '•••@' + d;
        },
        submit() {
          this.emailErr = !this.email.trim() ? 'Enter your email.' : (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.email.trim()) ? 'Enter a valid email address.' : '');
          if (this.emailErr) return;
          this.loading = true;
          // Demo only — never hits the network. Always succeeds (anti-enumeration).
          setTimeout(() => { this.loading = false; this.masked = this.maskEmail(this.email.trim()); this.sent = true; this.startCooldown(); }, 800);
        },
        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();
        },
      };
    }
  </script>
{% endblock %}