{# Conversation history — grouped by recency (Today / Yesterday / …). #}
{% load humanize %}
<div class="flex h-full flex-col">

  <div class="flex shrink-0 items-center justify-between border-b border-ruforum-border bg-white px-4 py-3">
    <div>
      <p class="font-meta text-[0.62rem] font-semibold uppercase tracking-[0.18em] text-ruforum-text-muted">History</p>
      <p class="mt-0.5 text-xs leading-tight text-ruforum-text-muted/80">
        {% if conversations %}{{ conversations|length }} conversation{{ conversations|length|pluralize }}{% else %}No conversations yet{% endif %}
      </p>
    </div>
    <button
      type="button"
      class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ruforum-text-muted transition-colors hover:bg-ruforum-warm-hover hover:text-ruforum-text focus:outline-none focus-visible:ring-2 focus-visible:ring-ruforum-primary/30"
      hx-get="{% url 'assistant:panel' %}"
      hx-target="#assistant-body"
      hx-swap="innerHTML"
      @click="view = 'chat'"
      aria-label="Back to chat"
    >
      <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="M15 19l-7-7 7-7"/>
      </svg>
    </button>
  </div>

  <div class="flex-1 overflow-y-auto">
    {% if grouped_conversations %}
      {% for label, items in grouped_conversations %}
        <div class="assistant-history-group-label">{{ label }}</div>
        <ul class="divide-y divide-ruforum-border/60">
          {% for c in items %}
            {% include "assistant/_conversation_row.html" with c=c %}
          {% endfor %}
        </ul>
      {% endfor %}
    {% else %}
      <div class="flex h-full flex-col items-center justify-center gap-3 px-6 py-10 text-center">
        <span aria-hidden="true" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-dashed border-ruforum-border-strong text-ruforum-text-muted/70">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.6" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12a9 9 0 1018 0 9 9 0 00-18 0zM12 7v5l3 2"/></svg>
        </span>
        <p class="text-xs leading-relaxed text-ruforum-text-muted">No conversations yet. Ask something on the chat tab to start one.</p>
      </div>
    {% endif %}
  </div>
</div>