{# Swappable chatter body — HTMX target ``#pv-chatter-inner``. #}
<div class="p-4 pb-2 border-b border-default shrink-0">
    <div class="flex items-center justify-between gap-2">
        <h2 class="text-sm font-semibold text-heading">Activity</h2>
        {% if chatter_context.messages %}
        <span class="text-2xs text-body-subtle tabular-nums">{{ chatter_context.messages | length }}</span>
        {% endif %}
    </div>

    <nav class="flex flex-wrap gap-1 mt-2" aria-label="Filter messages">
        {% for f in chatter_context.filters %}
        <a href="{{ f.href }}"
           class="px-2 py-0.5 rounded-full text-2xs font-medium transition
                  {% if chatter_context.filter == f.key %}
                  bg-fg-brand text-white
                  {% else %}
                  bg-neutral-secondary text-body-subtle hover:text-heading hover:bg-neutral-tertiary
                  {% endif %}"
           hx-get="{{ f.href }}"
           hx-target="#pv-chatter-inner"
           hx-swap="innerHTML">
            {{ f.label }}
        </a>
        {% endfor %}
    </nav>
</div>

{% if chatter_context.error %}
<p class="px-4 py-2 text-sm text-fg-danger shrink-0">{{ chatter_context.error }}</p>
{% endif %}

<div class="flex-1 min-h-0 overflow-y-auto overscroll-contain px-4 py-3">
    {% if chatter_context.messages %}
    <ol class="space-y-4" aria-label="Message log">
        {% for msg in chatter_context.messages %}
        <li class="flex gap-3 text-sm">
            <span class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full
                         bg-neutral-secondary text-2xs font-semibold text-heading"
                  aria-hidden="true"
                  title="{{ msg.author or 'Unknown' }}">
                {{ msg.author_initials }}
            </span>
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
                    {% if msg.author %}
                    <span class="text-xs font-medium text-heading">{{ msg.author }}</span>
                    {% endif %}
                    {% if msg.at_display %}
                    <time class="text-2xs text-body-subtle"
                          {% if msg.at %}datetime="{{ msg.at }}"{% endif %}>
                        {{ msg.at_display }}
                    </time>
                    {% endif %}
                    {% if msg.subtype_label %}
                    <span class="text-2xs font-semibold uppercase tracking-wide
                        {% if msg.variant == 'success' %}text-success-strong
                        {% elif msg.variant == 'danger' %}text-fg-danger
                        {% elif msg.variant == 'warning' %}text-warning-strong
                        {% else %}text-body-subtle{% endif %}">
                        {{ msg.subtype_label }}
                    </span>
                    {% endif %}
                    {% if msg.email_state %}
                    <span class="text-2xs font-medium px-1.5 py-0.5 rounded
                        {% if msg.email_state == 'Sent' %}bg-success-soft text-success-strong
                        {% elif msg.email_state == 'Failed' %}bg-danger-soft text-fg-danger
                        {% else %}bg-warning-soft text-warning-strong{% endif %}">
                        {{ msg.email_state }}
                    </span>
                    {% endif %}
                </div>
                {% if msg.recipient_email %}
                <p class="text-2xs text-body-subtle mt-0.5">
                    To: <span class="font-medium">{{ msg.recipient_email }}</span>
                    {% if msg.email_subject %}
                    · {{ msg.email_subject }}
                    {% endif %}
                </p>
                {% endif %}
                <p class="text-body mt-1 whitespace-pre-wrap leading-snug">{{ msg.body }}</p>
                {% if msg.attachments %}
                <ul class="mt-2 flex flex-wrap gap-1.5">
                    {% for att in msg.attachments %}
                    <li>
                        <a href="{{ att.download_url }}"
                           class="inline-flex items-center gap-1 px-2 py-1 rounded-md text-2xs
                                  bg-neutral-secondary border border-default text-fg-brand hover:underline">
                            <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M13.5 2.25v6a.75.75 0 00.75.75h6M15 2.25H6a2.25 2.25 0 00-2.25 2.25v15a2.25 2.25 0 002.25 2.25h12a2.25 2.25 0 002.25-2.25V8.25l-6-6z"/>
                            </svg>
                            <span class="truncate max-w-[10rem]">{{ att.name }}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
        </li>
        {% endfor %}
    </ol>
    {% else %}
    <p class="text-sm text-body-subtle py-4 text-center">
        {% if chatter_context.filter == 'all' %}
        No activity yet. Log a note, send an email, or edit tracked fields.
        {% elif chatter_context.filter == 'notes' %}
        No notes yet.
        {% elif chatter_context.filter == 'emails' %}
        No emails logged yet.
        {% elif chatter_context.filter == 'tracking' %}
        No field changes yet.
        {% else %}
        No messages in this filter.
        {% endif %}
    </p>
    {% endif %}
</div>

{% if chatter_context.can_post %}
<div class="shrink-0 border-t border-default p-4 space-y-3 bg-neutral-secondary/40">
    <div class="flex rounded-lg border border-default overflow-hidden text-2xs font-medium"
         role="tablist">
        <button type="button"
                role="tab"
                :aria-selected="mode === 'note'"
                @click="mode = 'note'"
                class="flex-1 px-3 py-1.5 transition"
                :class="mode === 'note' ? 'bg-fg-brand text-white' : 'bg-neutral-primary text-body-subtle hover:text-heading'">
            Log note
        </button>
        <button type="button"
                role="tab"
                :aria-selected="mode === 'email'"
                @click="mode = 'email'"
                class="flex-1 px-3 py-1.5 transition"
                :class="mode === 'email' ? 'bg-fg-brand text-white' : 'bg-neutral-primary text-body-subtle hover:text-heading'">
            Send email
        </button>
    </div>

    <form class="space-y-2"
          hx-post="{{ chatter_context.post_url }}"
          hx-target="#pv-chatter-inner"
          hx-swap="innerHTML"
          @submit="if (mode === 'email' && !$refs.recipient?.value?.trim()) { $event.preventDefault(); window.pvAlert?.('Recipient email is required.'); }">
        <input type="hidden" name="model" value="{{ chatter_context.model }}">
        <input type="hidden" name="res_id" value="{{ chatter_context.res_id }}">
        <input type="hidden" name="filter" value="{{ chatter_context.filter }}">
        <input type="hidden" name="action" :value="mode">

        <div x-show="mode === 'email'" x-cloak class="space-y-2">
            <input type="email"
                   x-ref="recipient"
                   name="recipient_email"
                   placeholder="recipient@example.com"
                   class="w-full text-sm rounded-md border border-default bg-neutral-primary
                          text-body px-3 py-1.5 focus:ring-2 focus:ring-fg-brand/30">
            <input type="text"
                   name="subject"
                   placeholder="Subject (optional)"
                   class="w-full text-sm rounded-md border border-default bg-neutral-primary
                          text-body px-3 py-1.5 focus:ring-2 focus:ring-fg-brand/30">
            {% if chatter_context.compose_url %}
            <button type="button"
                    class="inline-flex items-center gap-1 text-2xs text-fg-brand hover:underline"
                    @click.prevent="window.PvDialog && window.PvDialog.open({
                        url: '{{ chatter_context.compose_url }}',
                        title: 'Compose email',
                        onResult: () => location.reload(),
                    })">
                Open rich composer (templates, Cc/Bcc, attachments) →
            </button>
            {% endif %}
        </div>

        <label class="sr-only" for="pv-chatter-body">Message</label>
        <textarea id="pv-chatter-body"
                  name="body"
                  rows="3"
                  required
                  :placeholder="mode === 'email' ? 'Email body…' : 'Log an internal note…'"
                  class="w-full text-sm rounded-md border border-default bg-neutral-primary
                         text-body px-3 py-2 focus:ring-2 focus:ring-fg-brand/30 focus:border-fg-brand"></textarea>

        {% if chatter_context.attachments_enabled %}
        <div class="pv-chatter-attachments">
            {% set name = 'attachment_ids' %}
            {% set res_model = '' %}
            {% set res_id = 0 %}
            {% set initial = [] %}
            {% set readonly = false %}
            {% include "widgets/attachment.html" %}
        </div>
        {% endif %}

        <button type="submit"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white
                       rounded-md bg-fg-brand hover:opacity-90 transition">
            <span x-text="mode === 'email' ? 'Send' : 'Log note'"></span>
        </button>
    </form>
</div>
{% else %}
<p class="px-4 py-3 text-sm text-body-subtle border-t border-default shrink-0">
    You do not have permission to post on this record.
</p>
{% endif %}