{% extends 'base.html' %}

{# Draggable Cards — the reference puts x-data="axBoard()" on <main>; base.html
   owns <main>, so we carry the Alpine component on a wrapper <div>. Content,
   Alpine bindings and the page-local axBoard() script are verbatim. #}

{% block main %}
<div x-data="axBoard()">

        <!-- ════════════════ 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">Draggable Cards</h1>
              <p class="ax-page-head__subtitle">A drag-and-drop board — move cards within a column or across columns. Drop targets glow with the accent. Pure Alpine.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--ghost" @click="reset()">
                <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="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
                <span class="ax-btn__label">Reset board</span>
              </button>
              <a class="ax-btn ax-btn--secondary" href="/ui/sortable/">
                <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="M9 6l6 0"/><path d="M9 12l6 0"/><path d="M9 18l6 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg>
                <span class="ax-btn__label">Sortable lists</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ BOARD ════════════════ -->
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--ax-space-5);align-items:start;">
          <template x-for="col in columns" :key="col.key">
            <section class="ax-card" role="region" :aria-label="col.title + ' column'"
              @dragover.prevent="onColOver(col.key, $event)" @drop.prevent="onDrop(col.key, lists[col.key].length)">
              <div class="ax-card__header">
                <div class="ax-card__titles" style="display:flex;flex-direction:row;align-items:center;gap:var(--ax-space-3);">
                  <span style="width:9px;height:9px;border-radius:3px;" :style="'background:'+col.tone" aria-hidden="true"></span>
                  <h2 class="ax-card__title" style="margin:0;" x-text="col.title"></h2>
                  <span class="ax-badge ax-badge--soft ax-badge--pill ax-num" x-text="lists[col.key].length"></span>
                </div>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="addCard(col.key)" :aria-label="'Add card to ' + col.title">
                  <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 5l0 14"/><path d="M5 12l14 0"/></svg>
                </button>
              </div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);min-height:120px;border-radius:var(--ax-radius-md);transition:background var(--ax-motion-fast);"
                :style="{ background: overCol===col.key && drag.col!==null ? 'var(--ax-accent-wash)' : 'transparent' }">
                <template x-for="(card, idx) in lists[col.key]" :key="card.id">
                  <article draggable="true"
                    @dragstart="onStart(col.key, idx, $event)" @dragend="onEnd()"
                    @dragover.prevent.stop="onCardOver(col.key, idx, $event)" @drop.prevent.stop="onDrop(col.key, idx)"
                    tabindex="0" role="article" :aria-label="card.title + ', ' + col.title + ', card ' + (idx+1) + ' of ' + lists[col.key].length"
                    style="position:relative;padding:var(--ax-space-4);background:var(--ax-surface-solid);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);box-shadow:var(--ax-shadow-sm);cursor:grab;transition:opacity var(--ax-motion-fast),box-shadow var(--ax-motion-fast),transform var(--ax-motion-fast);"
                    :style="{ opacity: drag.col===col.key && drag.idx===idx ? '.4' : '1', boxShadow: overCol===col.key && overIdx===idx && !(drag.col===col.key && drag.idx===idx) ? '0 0 0 2px var(--ax-accent)' : 'var(--ax-shadow-sm)' }">
                    <div class="ax-cluster" style="justify-content:space-between;margin-bottom:var(--ax-space-2);">
                      <span class="ax-badge ax-badge--soft ax-badge--pill" :class="'ax-badge--'+card.tagTone" x-text="card.tag"></span>
                      <span style="color:var(--ax-text-subtle);display:inline-flex;cursor:grab;" aria-hidden="true">
                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M8 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M14 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/><path d="M14 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
                      </span>
                    </div>
                    <h3 style="margin:0 0 var(--ax-space-1);font-size:var(--ax-text-sm);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);line-height:1.4;" x-text="card.title"></h3>
                    <p style="margin:0 0 var(--ax-space-3);font-size:var(--ax-text-xs);color:var(--ax-text-muted);line-height:1.5;" x-text="card.desc"></p>
                    <div class="ax-cluster" style="justify-content:space-between;flex-wrap:nowrap;">
                      <span class="ax-cluster" style="gap:var(--ax-space-2);">
                        <span class="ax-avatar ax-avatar--xs" :style="'background:color-mix(in oklab,'+card.avTone+' 18%,transparent);color:'+card.avTone" x-text="card.initials"></span>
                        <span class="ax-num" style="font-size:var(--ax-text-2xs);font-family:var(--ax-font-mono);color:var(--ax-text-subtle);" x-text="card.ref"></span>
                      </span>
                      <span class="ax-cluster" style="gap:4px;font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">
                        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
                        <span x-text="card.due"></span>
                      </span>
                    </div>
                  </article>
                </template>
                <p x-show="lists[col.key].length===0" style="margin:auto 0;text-align:center;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);padding-block:var(--ax-space-5);">Drop a card here</p>
              </div>
            </section>
          </template>
        </div>

        <!-- ════ Page-local Alpine board component ════ -->
        <script>
          function axBoard() {
            const seed = {
              columns: [
                { key: 'backlog',  title: 'Backlog',     tone: 'var(--ax-viz-violet)' },
                { key: 'progress', title: 'In progress',  tone: 'var(--ax-viz-cyan)' },
                { key: 'review',   title: 'In review',    tone: 'var(--ax-viz-amber)' },
                { key: 'done',     title: 'Done',         tone: 'var(--ax-viz-emerald)' },
              ],
              lists: {
                backlog: [
                  { id: 1, ref: 'TSK-241', tag: 'Feature', tagTone: 'accent', title: 'Add coverflow effect to Swiper', desc: 'Stacked-cards transition driven by CSS transforms and Alpine state.', initials: 'LB', avTone: 'var(--ax-viz-violet)', due: 'Jul 4' },
                  { id: 2, ref: 'TSK-238', tag: 'Design',  tagTone: 'info',   title: 'Empty-state illustrations', desc: 'Cohesive set for tables, search and inbox zero.', initials: 'LB', avTone: 'var(--ax-viz-pink)', due: 'Jul 6' },
                  { id: 3, ref: 'TSK-235', tag: 'Chore',   tagTone: 'warning',title: 'Audit dark-mode chart legends', desc: 'Verify legend contrast across all 12 accents.', initials: 'PN', avTone: 'var(--ax-viz-cyan)', due: 'Jul 9' },
                ],
                progress: [
                  { id: 4, ref: 'TSK-230', tag: 'Feature', tagTone: 'accent', title: 'Customizer accent presets', desc: 'Wire the 12 Aurora presets to the live ChangeBus.', initials: 'DO', avTone: 'var(--ax-viz-emerald)', due: 'Jun 30' },
                  { id: 5, ref: 'TSK-229', tag: 'Bug',     tagTone: 'danger', title: 'Editable table validation', desc: 'Block save on invalid cells; scroll first error into view.', initials: 'MR', avTone: 'var(--ax-viz-violet)', due: 'Jun 29' },
                ],
                review: [
                  { id: 6, ref: 'TSK-224', tag: 'Feature', tagTone: 'accent', title: 'Vector map region select', desc: 'Click-to-select with accent fill and mono tooltip.', initials: 'DO', avTone: 'var(--ax-viz-cyan)', due: 'Jun 28' },
                ],
                done: [
                  { id: 7, ref: 'TSK-218', tag: 'Feature', tagTone: 'success', title: 'Sales dashboard flagship', desc: 'Hero area chart, balance plate and recent activity feed.', initials: 'AS', avTone: 'var(--ax-viz-emerald)', due: 'Jun 24' },
                  { id: 8, ref: 'TSK-214', tag: 'Chore',   tagTone: 'success', title: 'Token-only colour pass', desc: 'Replace every literal colour with a role token.', initials: 'JF', avTone: 'var(--ax-viz-amber)', due: 'Jun 22' },
                ],
              },
            };
            return {
              columns: seed.columns,
              lists: JSON.parse(JSON.stringify(seed.lists)),
              drag: { col: null, idx: null },
              overCol: null,
              overIdx: null,
              nextId: 100,
              onStart(col, idx, e) {
                this.drag = { col, idx };
                if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', col + ':' + idx); } catch (err) {} }
              },
              onColOver(col) { this.overCol = col; this.overIdx = this.lists[col].length; },
              onCardOver(col, idx) { this.overCol = col; this.overIdx = idx; },
              onDrop(col, idx) {
                if (this.drag.col === null) { this.clear(); return; }
                const card = this.lists[this.drag.col].splice(this.drag.idx, 1)[0];
                let target = idx;
                if (this.drag.col === col && this.drag.idx < idx) target = idx - 1;
                if (target < 0) target = 0;
                if (target > this.lists[col].length) target = this.lists[col].length;
                this.lists[col].splice(target, 0, card);
                this.onEnd();
              },
              onEnd() { this.clear(); },
              clear() { this.drag = { col: null, idx: null }; this.overCol = null; this.overIdx = null; },
              addCard(col) {
                this.lists[col].unshift({ id: this.nextId++, ref: 'TSK-' + (300 + this.nextId), tag: 'New', tagTone: 'accent', title: 'New card', desc: 'Drag me to another column or reorder within this one.', initials: 'AX', avTone: 'var(--ax-accent)', due: 'Soon' });
              },
              reset() { this.lists = JSON.parse(JSON.stringify(seed.lists)); this.clear(); },
            };
          }
        </script>
</div>
{% endblock %}