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

{# auth/maintenance — faithful port of src/html/auth/maintenance.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 %}
  <style>
    @keyframes ax-spin-slow { to { transform: rotate(360deg); } }
    .ax-gear-spin { transform-origin: center; animation: ax-spin-slow 14s linear infinite; }
    @media (prefers-reduced-motion: reduce) { .ax-gear-spin { animation: none; } .ax-bar-indet::after { animation: none !important; left: 0 !important; width: 100% !important; } }
    .ax-bar-indet { position: relative; height: 6px; border-radius: var(--ax-radius-pill); background: var(--ax-fill-hover); overflow: hidden; }
    .ax-bar-indet::after {
      content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%; width: 40%;
      border-radius: var(--ax-radius-pill); background: var(--ax-gradient-accent);
      animation: ax-indet 1.6s var(--ax-ease-standard) infinite;
    }
    @keyframes ax-indet { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } }
  </style>

  <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()">
      <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 id="ax-main" style="position:relative;z-index:1;width:100%;max-width:560px;text-align:center;">

    <!-- brand -->
    <div class="ax-center" style="margin-block-end:var(--ax-space-6);">
      <a href="/" class="ax-cluster" style="gap:var(--ax-space-3);text-decoration:none;" aria-label="Vireo home">
        <span style="display:inline-grid;place-items:center;width:42px;height: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>
        <b style="font-family:var(--ax-font-display);font-size:var(--ax-text-lg);color:var(--ax-text-strong);">Vireo</b>
      </a>
    </div>

    <!-- ── MAINTENANCE ILLUSTRATION (two-tone thin-line, single warning highlight) ── -->
    <div class="ax-center" style="margin-block-end:var(--ax-space-6);" aria-hidden="true">
      <span style="display:inline-grid;place-items:center;width:128px;height:128px;border-radius:50%;background:var(--ax-warning-50);position:relative;">
        <!-- large slow gear (muted) -->
        <svg viewBox="0 0 24 24" width="78" height="78" fill="none" stroke="var(--ax-text-subtle)" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><g class="ax-gear-spin"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/></g></svg>
        <!-- small wrench accent (warning highlight) -->
        <span style="position:absolute;right:14px;bottom:14px;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ax-surface-solid);box-shadow:var(--ax-shadow-sm);">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="var(--ax-warning-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"/></svg>
        </span>
      </span>
    </div>

    <!-- status badge -->
    <span class="ax-badge ax-badge--soft ax-badge--warning ax-badge--pill" style="margin-block-end:var(--ax-space-4);">
      <span class="ax-badge__dot"></span>Scheduled maintenance
    </span>

    <h1 style="font-family:var(--ax-font-display);font-size:var(--ax-text-3xl);font-weight:600;color:var(--ax-text-strong);margin:0 0 var(--ax-space-3);letter-spacing:-.02em;line-height:1.1;">We'll be back shortly.</h1>
    <p style="font-size:var(--ax-text-md);color:var(--ax-text-muted);margin:0 auto var(--ax-space-6);max-width:48ch;">
      Vireo is undergoing planned maintenance to ship database upgrades and faster dashboards. Your data is safe and nothing is lost — this is a routine, scheduled window.
    </p>

    <!-- ETA card -->
    <div class="ax-card" style="text-align:start;max-width:460px;margin-inline:auto;margin-block-end:var(--ax-space-6);">
      <div class="ax-card__body" style="padding:var(--ax-space-6);">
        <div class="ax-cluster ax-cluster--between" style="margin-block-end:var(--ax-space-3);">
          <span style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);">Estimated time remaining</span>
          <b class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-md);color:var(--ax-text-strong);">00:42:00</b>
        </div>
        <div class="ax-bar-indet" role="progressbar" aria-label="Maintenance in progress" aria-valuetext="Estimated 42 minutes remaining"></div>
        <div class="ax-cluster ax-cluster--between" style="margin-block-start:var(--ax-space-4);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">
          <span>Started <span class="ax-num">02:00 UTC</span></span>
          <span>Expected back by <span class="ax-num" style="color:var(--ax-text-muted);">02:45 UTC</span></span>
        </div>
      </div>
    </div>

    <!-- actions -->
    <div class="ax-cluster" style="gap:var(--ax-space-3);justify-content:center;">
      <a class="ax-btn ax-btn--secondary" href="#">
        <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 12h4.5l1.5 -6l4 12l2 -9l1.5 3h4.5"/></svg>
        <span class="ax-btn__label">View system status</span>
      </a>
      <a class="ax-btn ax-btn--ghost" href="mailto:support@vireo.io">
        <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 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 class="ax-btn__label">Contact support</span>
      </a>
    </div>

    <p style="margin-block-start:var(--ax-space-8);font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">
      Need urgent help? Email <a class="ax-link" href="mailto:support@vireo.io">support@vireo.io</a> · Status code <span class="ax-num">503</span>
    </p>
  </main>

  
{% endblock %}

{% block auth_scripts %}

{% endblock %}