{# Floating chat widget — included once in templates/layouts/dashboard.html. #}
{% load static %}
<div
  id="assistant-widget"
  x-data="{ open: false, view: 'chat', loaded: false }"
  x-cloak
  @keydown.escape.window="open && (open = false)"
  @assistant:open.window="open = true"
>
  {# ─── Floating action button ──────────────────────────────────────────── #}
  <button
    type="button"
    class="assistant-fab fixed bottom-5 right-5 z-40 flex h-14 w-14 items-center justify-center rounded-full bg-ruforum-primary text-white transition-all duration-200 hover:bg-ruforum-primary-hover hover:-translate-y-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-ruforum-primary/40 focus-visible:ring-offset-2"
    aria-label="Open IILMP assistant"
    aria-controls="assistant-panel"
    :aria-expanded="open"
    x-show="!open"
    @click="open = true; if (!loaded) { loaded = true; $nextTick(() => htmx.trigger($refs.body, 'assistant:load')); }"
  >
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.6" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
    </svg>
  </button>

  {# ─── Panel ───────────────────────────────────────────────────────────── #}
  <section
    id="assistant-panel"
    role="dialog"
    aria-labelledby="assistant-title"
    class="assistant-panel fixed inset-x-0 bottom-0 top-0 z-40 flex w-full flex-col overflow-hidden border border-ruforum-border bg-white shadow-dropdown sm:bottom-5 sm:right-5 sm:top-auto sm:left-auto sm:h-[640px] sm:w-[420px] sm:max-h-[calc(100dvh-2.5rem)] sm:rounded-2xl"
    x-show="open"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 translate-y-1 sm:scale-[0.98]"
    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 translate-y-1"
  >
    {# Header — solid brand strip, dual-line title #}
    <header class="flex shrink-0 items-center gap-2 bg-ruforum-primary px-4 py-3 text-white">
      <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/15">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
        </svg>
      </div>
      <div class="min-w-0 flex-1">
        <h2 id="assistant-title" class="font-display text-[0.95rem] font-semibold leading-tight tracking-tight">IILMP Assistant</h2>
        <p class="font-meta text-[0.6rem] uppercase tracking-[0.18em] text-white/65">Ask about the platform</p>
      </div>

      <div class="flex items-center gap-0.5">
        <button
          type="button"
          aria-label="Conversation history"
          class="assistant-icon-btn"
          :class="view === 'history' ? 'is-active' : ''"
          hx-get="{% url 'assistant:conversation_list' %}"
          hx-target="#assistant-body"
          hx-swap="innerHTML"
          @click="view = 'history'"
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 12a9 9 0 1018 0 9 9 0 00-18 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 7v5l3 2"/>
          </svg>
        </button>
        <button
          type="button"
          aria-label="New conversation"
          class="assistant-icon-btn"
          hx-post="{% url 'assistant:conversation_create' %}"
          hx-target="#assistant-body"
          hx-swap="innerHTML"
          @click="view = 'chat'"
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/>
          </svg>
        </button>
        <button
          type="button"
          aria-label="Close assistant"
          class="assistant-icon-btn"
          @click="open = false"
        >
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </header>

    {# Body — HTMX swap target #}
    <div
      id="assistant-body"
      x-ref="body"
      class="flex flex-1 flex-col overflow-hidden bg-ruforum-surface-warm"
      hx-get="{% url 'assistant:panel' %}"
      hx-trigger="assistant:load"
      hx-swap="innerHTML"
    >
      <div class="flex flex-1 items-center justify-center">
        <div class="flex items-center gap-2 font-meta text-[0.65rem] uppercase tracking-[0.16em] text-ruforum-text-muted/70">
          <span class="inline-block h-1 w-1 animate-pulse rounded-full bg-ruforum-primary/60"></span>
          Loading
        </div>
      </div>
    </div>
  </section>
</div>