{% extends base_template %}

{% block content %}
{# ── Kanban board ─────────────────────────────────────────────────────────── #}
<div x-cloak x-data="boardView()" x-init="init()">
<section x-data="{ refreshed: false }">
  <div class="flex justify-end mb-3">
    <a
      href="/board"
      x-target="board"
      @ajax:success="refreshed = true; setTimeout(() => refreshed = false, 1500)"
      class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5
        text-xs font-medium text-faint hover:text-primary
        bg-surface-2 hover:bg-surface-3 border border-subtle hover:border-subtle-hover
        transition-colors duration-150"
      title="Refresh board"
    >
      <svg x-show="!refreshed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
        <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
      </svg>
      <svg x-show="refreshed" xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
      Refresh
    </a>
  </div>
  {% include "partials/board.html" %}
</section>

{# ── Task detail modal ──────────────────────────────────────────────────── #}
<template x-if="modalOpen">
  <div
    class="fixed inset-0 z-50 flex items-center justify-center p-6"
    @keydown.escape.window="closeModal()"
    @close-modal.window="closeModal()"
  >
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeModal()"></div>
    <article class="relative z-10 w-full max-w-2xl max-h-[80vh] flex flex-col bg-surface-2 border border-subtle rounded-xl shadow-2xl overflow-hidden">
      <div id="task-detail" class="flex flex-col min-h-0 flex-1"></div>
    </article>
  </div>
</template>
</div>
{% endblock %}