{% extends 'base.html' %}

{% block main %}
<div x-data="axAuctions()" x-init="start()">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Live Auction</h1>
              <p class="ax-page-head__subtitle"><span class="ax-num" x-text="liveCount()"></span> auctions live now · <span class="ax-num" x-text="endingCount()"></span> ending within the hour.</p>
            </div>
            <div class="ax-page-head__actions">
              <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill" style="align-self:center;"><span class="ax-badge__dot"></span>Live updating</span>
              <a class="ax-btn ax-btn--primary" href="/nft/create-nft/">
                <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="M13 10l7.383 7.418c.823 .82 .823 2.148 0 2.967a2.11 2.11 0 0 1 -2.976 0l-7.407 -7.385"/><path d="M6 9l4 4"/><path d="M13 10l-4 -4"/><path d="M3 21h7"/><path d="M6.793 15.793l-3.586 -3.586a1 1 0 0 1 0 -1.414l2.293 -2.293l.5 .5l3 -3l-.5 -.5l2.293 -2.293a1 1 0 0 1 1.414 0l3.586 3.586a1 1 0 0 1 0 1.414l-2.293 2.293l-.5 -.5l-3 3l.5 .5l-2.293 2.293a1 1 0 0 1 -1.414 0"/></svg>
                <span class="ax-btn__label">Start auction</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid">

          <!-- filter bar -->
          <section class="ax-card ax-col--12" role="region" aria-label="Auction filters">
            <div class="ax-card__body" style="display:flex;align-items:center;gap:var(--ax-space-3);flex-wrap:wrap;">
              <div class="ax-cluster" style="gap:var(--ax-space-1);">
                <template x-for="t in tabs" :key="t.id">
                  <button type="button" class="ax-badge ax-badge--pill" :class="filter===t.id ? 'ax-badge--accent ax-badge--solid' : 'ax-badge--neutral ax-badge--soft'" style="cursor:pointer;border:0;" @click="filter=t.id" :aria-pressed="(filter===t.id).toString()">
                    <span x-text="t.label"></span>
                    <span class="ax-num" style="margin-inline-start:5px;opacity:.85;" x-text="t.count"></span>
                  </button>
                </template>
              </div>
              <span style="flex:1 1 auto;"></span>
              <select class="ax-select ax-select--sm" x-model="sort" aria-label="Sort auctions" style="min-width:160px;">
                <option value="ending">Ending soonest</option>
                <option value="bid">Highest bid</option>
                <option value="bids">Most bids</option>
              </select>
            </div>
          </section>

          <!-- auction grid -->
          <div class="ax-col--12" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:var(--ax-space-5);">
            <template x-for="a in filtered()" :key="a.id">
              <article class="ax-card ax-card--interactive" style="margin:0;overflow:hidden;display:flex;flex-direction:column;" :style="a.remain<=0 ? 'opacity:.82;' : ''">
                <!-- media -->
                <div style="position:relative;aspect-ratio:4/3;" :style="`position:relative;aspect-ratio:4/3;background:linear-gradient(${a.angle}deg, color-mix(in oklab,${a.c1} 76%,var(--ax-surface-solid)), color-mix(in oklab,${a.c2} 58%,var(--ax-surface-solid)));`">
                  <!-- live / ended badge -->
                  <span x-show="a.remain>0" class="ax-badge ax-badge--solid ax-badge--accent ax-badge--pill" style="position:absolute;top:var(--ax-space-3);inset-inline-start:var(--ax-space-3);"><span class="ax-badge__dot"></span>Live</span>
                  <span x-show="a.remain<=0" x-cloak class="ax-badge ax-badge--solid ax-badge--neutral ax-badge--pill" style="position:absolute;top:var(--ax-space-3);inset-inline-start:var(--ax-space-3);">Ended</span>
                  <!-- countdown -->
                  <span class="ax-num" :style="`position:absolute;top:var(--ax-space-3);inset-inline-end:var(--ax-space-3);display:inline-flex;align-items:center;gap:5px;font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);font-weight:var(--ax-weight-semibold);padding:4px 9px;border-radius:var(--ax-radius-pill);backdrop-filter:blur(6px);background:rgba(8,10,15,.5);color:${a.remain<=0 ? '#fff' : (a.remain<300 ? 'color-mix(in oklab,var(--ax-danger-500),white 32%)' : (a.remain<600 ? 'color-mix(in oklab,var(--ax-warning-500),white 32%)' : '#fff'))};`">
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" 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 7v5l3 3"/></svg>
                    <span x-text="a.remain<=0 ? 'Closed' : fmt(a.remain)"></span>
                  </span>
                  <!-- glyph -->
                  <span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.55)" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:52px;height:52px;"><path d="M6 12l6 -9l6 9l-6 9l-6 -9"/><path d="M6 12l6 -3l6 3l-6 2l-6 -2"/></svg>
                  </span>
                </div>
                <!-- body -->
                <div class="ax-card__body" style="padding:var(--ax-space-4);display:flex;flex-direction:column;gap:var(--ax-space-3);flex:1 1 auto;">
                  <div>
                    <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:nowrap;">
                      <span class="ax-text-truncate" style="font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);flex:1 1 auto;min-width:0;" x-text="a.title"></span>
                      <svg x-show="a.verified" viewBox="0 0 24 24" fill="none" stroke="var(--ax-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="Verified" style="width:14px;height:14px;flex:none;"><path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7c.412 .41 .97 .64 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58 .23 1.138 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1"/><path d="M9 12l2 2l4 -4"/></svg>
                    </div>
                    <div style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">by <span x-text="a.creator"></span></div>
                  </div>
                  <!-- bid + bidders -->
                  <div class="ax-cluster" style="justify-content:space-between;align-items:flex-end;padding-top:var(--ax-space-2);border-top:1px solid var(--ax-border);">
                    <div style="min-width:0;">
                      <div style="font-size:var(--ax-text-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--ax-text-subtle);" x-text="a.remain<=0 ? 'Sold for' : 'Current bid'"></div>
                      <div class="ax-num" style="font-family:var(--ax-font-mono);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);font-size:var(--ax-text-md);" x-text="a.bid.toFixed(2) + ' ETH'"></div>
                    </div>
                    <div class="ax-cluster" style="gap:5px;color:var(--ax-text-muted);font-size:var(--ax-text-xs);">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:14px;height:14px;"><path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M21 21v-2a4 4 0 0 0 -3 -3.85"/></svg>
                      <span class="ax-num" x-text="a.bids"></span>
                    </div>
                  </div>
                  <!-- CTA -->
                  <button type="button" class="ax-btn ax-btn--block" :class="a.remain<=0 ? 'ax-btn--secondary' : 'ax-btn--primary'" :disabled="a.remain<=0" x-text="a.remain<=0 ? 'Auction ended' : 'Place bid'"></button>
                </div>
              </article>
            </template>
          </div>

          <!-- empty state -->
          <div class="ax-col--12" x-show="!filtered().length" x-cloak style="text-align:center;padding:var(--ax-space-10) var(--ax-space-5);">
            <span class="ax-avatar ax-avatar--xl ax-avatar--squircle" style="background:var(--ax-surface-subtle);color:var(--ax-text-subtle);margin:0 auto var(--ax-space-4);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:28px;height:28px;"><path d="M13 10l7.383 7.418c.823 .82 .823 2.148 0 2.967a2.11 2.11 0 0 1 -2.976 0l-7.407 -7.385"/><path d="M6 9l4 4"/><path d="M13 10l-4 -4"/><path d="M3 21h7"/></svg></span>
            <h3 style="color:var(--ax-text-strong);font-family:var(--ax-font-display);margin-bottom:var(--ax-space-2);">No auctions here</h3>
            <p style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);">Nothing matches this filter right now. Check back soon.</p>
          </div>
        </div>
</div>
{% endblock %}

{% block scripts %}
<script>
          function axAuctions(){
            const C={cyan:'var(--ax-viz-cyan)',violet:'var(--ax-viz-violet)',pink:'var(--ax-viz-pink)',amber:'var(--ax-viz-amber)',emerald:'var(--ax-viz-emerald)'};
            return {
              filter:'all', sort:'ending', _t:null,
              /* A getter, not a plain array: arrow functions written directly in this
                 object literal capture `this` from the enclosing scope (window), not
                 the Alpine component, so every `t.count()` threw on `undefined`.
                 As a getter `this` is the reactive proxy and the counts stay live
                 as the per-second tick moves auctions between buckets. */
              get tabs(){ return [
                { id:'all',    label:'All',         count: this.auctions.length },
                { id:'live',   label:'Live',        count: this.auctions.filter(a=>a.remain>600).length },
                { id:'ending', label:'Ending soon', count: this.auctions.filter(a=>a.remain>0 && a.remain<=600).length },
                { id:'ended',  label:'Ended',       count: this.auctions.filter(a=>a.remain<=0).length },
              ]; },
              auctions:[
                { id:1, title:'Neon Drifter #218',  creator:'Vortex Labs', verified:true,  bid:3.80, bids:24, remain:2538, angle:135, c1:C.violet,  c2:C.cyan },
                { id:2, title:'Soft Static #03',    creator:'Mira Aoki',   verified:true,  bid:0.85, bids:9,  remain:182,  angle:150, c1:C.emerald, c2:C.violet },
                { id:3, title:'Pastel Voyage #07',  creator:'Mira Aoki',   verified:true,  bid:2.10, bids:14, remain:4445, angle:160, c1:C.pink,    c2:C.amber },
                { id:4, title:'Glyph Engine #44',   creator:'Helio Studio',verified:true,  bid:5.40, bids:31, remain:551,  angle:140, c1:C.emerald, c2:C.cyan },
                { id:5, title:'Iron Bloom #99',     creator:'Kojima.eth',  verified:false, bid:1.70, bids:7,  remain:9100, angle:125, c1:C.amber,   c2:C.pink },
                { id:6, title:'Marble Ghost #56',   creator:'Helio Studio',verified:true,  bid:6.80, bids:42, remain:3320, angle:128, c1:C.violet,  c2:C.emerald },
                { id:7, title:'Bone Field #102',    creator:'Nova Reyes',  verified:true,  bid:1.10, bids:5,  remain:74,   angle:155, c1:C.cyan,    c2:C.pink },
                { id:8, title:'Chrome Spirit #44',  creator:'Nova Reyes',  verified:true,  bid:2.40, bids:18, remain:0,    angle:130, c1:C.cyan,    c2:C.violet },
                { id:9, title:'Solar Beast #088',   creator:'Kojima.eth',  verified:false, bid:0.92, bids:11, remain:0,    angle:165, c1:C.amber,   c2:C.violet },
                { id:10,title:'Echo Warden #1201',  creator:'Vortex Labs', verified:true,  bid:1.20, bids:6,  remain:6240, angle:145, c1:C.pink,    c2:C.cyan },
              ],
              start(){ this._t=setInterval(()=>{ this.auctions.forEach(a=>{ if(a.remain>0) a.remain--; }); }, 1000); },
              destroy(){ clearInterval(this._t); },
              fmt(s){ const h=Math.floor(s/3600), m=Math.floor((s%3600)/60), x=s%60; const p=(n)=>String(n).padStart(2,'0'); return `${p(h)}:${p(m)}:${p(x)}`; },
              liveCount(){ return this.auctions.filter(a=>a.remain>0).length; },
              endingCount(){ return this.auctions.filter(a=>a.remain>0 && a.remain<=3600).length; },
              filtered(){
                let r=this.auctions.filter(a=>{
                  if(this.filter==='live')   return a.remain>600;
                  if(this.filter==='ending') return a.remain>0 && a.remain<=600;
                  if(this.filter==='ended')  return a.remain<=0;
                  return true;
                });
                const by={ ending:(a,b)=>(a.remain<=0?1:0)-(b.remain<=0?1:0) || a.remain-b.remain, bid:(a,b)=>b.bid-a.bid, bids:(a,b)=>b.bids-a.bids };
                if(by[this.sort]) r=[...r].sort(by[this.sort]);
                return r;
              },
            };
          }
        </script>
{% endblock %}