{% if render_tab_counts_oob %}{% include "calendar/partials/_tab_counts_oob.html" %}{% endif %}
{% comment %}
Approvals tab for the Publish page — one row per post, matching the approved design.
Loaded into #tab-content. Re-fetches itself on approvalAction / bulkActionComplete
(fired by the action views' HX-Trigger), so every action updates the list in place.
The toast host lives in calendar.html (outside #tab-content) so a refresh doesn't
tear down the toast.
{% endcomment %}
{% load tz approval_extras %}

<div x-data="{ selectedPosts: [], diffOpen: false, rejectOpen: false, bulkReason: '' }"
     hx-trigger="approvalAction from:body, bulkActionComplete from:body"
     hx-get="{% url 'calendar:publish_tab_approvals' workspace_id=workspace.id %}?approval_status={{ status_filter }}{% if approval_filter_qs %}&{{ approval_filter_qs }}{% endif %}"
     hx-target="#tab-content" hx-swap="innerHTML"
     {% if is_htmx %}class="tab-slide-in"{% endif %}>

    {# filter pills #}
    <div class="flex flex-wrap items-center gap-x-1 gap-y-2 mb-5">
        {% include "calendar/partials/_approval_pill.html" with pid="all" label="All" count=all_count %}
        {% include "calendar/partials/_approval_pill.html" with pid="pending_review" label="Pending Review" count=pending_review_count %}
        {% include "calendar/partials/_approval_pill.html" with pid="pending_client" label="Pending Client" count=pending_client_count %}
        {% include "calendar/partials/_approval_pill.html" with pid="approved" label="Approved" count=approved_count %}
        {% include "calendar/partials/_approval_pill.html" with pid="rejected" label="Rejected" count=rejected_count %}
        {% include "calendar/partials/_approval_pill.html" with pid="changes_requested" label="Changes Requested" count=changes_requested_count %}
        {% include "calendar/partials/_approval_pill.html" with pid="on_hold" label="Hold" count=on_hold_count %}
    </div>

    {# post list #}
    <div class="space-y-3">
        {% for post in posts %}
        {% include "approvals/partials/_approval_row.html" %}
        {% empty %}
        <div class="text-center py-16">
            <div class="mx-auto w-14 h-14 rounded-full border-2 border-stone-200 flex items-center justify-center text-stone-300 mb-3">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20 6L9 17l-5-5"/></svg>
            </div>
            <p class="text-stone-500 font-medium">No posts pending approval</p>
            <p class="text-sm text-stone-400 mt-1">Posts submitted for review will appear here</p>
        </div>
        {% endfor %}
    </div>

    {% if can_approve %}
    {# selected ids carried for bulk hx-include #}
    <template x-for="id in selectedPosts" :key="id"><input type="hidden" name="post_ids" :value="id"></template>

    {# bulk action bar #}
    <div x-show="selectedPosts.length > 0" x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="translate-y-full opacity-0" x-transition:enter-end="translate-y-0 opacity-100"
         class="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
        <div class="flex items-center gap-3 px-5 py-3 bg-stone-900 text-white rounded-2xl shadow-2xl">
            <span class="text-[0.8125rem] font-medium" x-text="selectedPosts.length + ' selected'"></span>
            <div class="w-px h-5 bg-stone-700"></div>
            <button hx-post="{% url 'approvals:bulk_action' workspace_id=workspace.id %}"
                    hx-include="[name='post_ids']" hx-vals='{"action": "approve"}' hx-swap="none"
                    class="px-3.5 py-1.5 text-[0.8125rem] font-semibold rounded-full bg-emerald-500 hover:bg-emerald-600 text-white">Approve all</button>
            <button @click="rejectOpen = true"
                    class="px-3.5 py-1.5 text-[0.8125rem] font-semibold rounded-full bg-red-500 hover:bg-red-600 text-white">Reject all</button>
            <button @click="selectedPosts = []" class="ml-1 text-stone-400 hover:text-white">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
    </div>

    {# bulk reject modal #}
    <div x-show="rejectOpen" x-cloak class="fixed inset-0 z-[150] flex items-center justify-center p-4" @click="rejectOpen = false">
        <div class="absolute inset-0" style="background: rgba(28,25,23,.42); backdrop-filter: blur(3px);"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full modal-pop" style="max-width: 440px;" @click.stop>
            <div class="p-6">
                <h3 class="text-[1.0625rem] font-bold text-stone-900 mb-1" x-text="'Reject ' + selectedPosts.length + (selectedPosts.length > 1 ? ' posts' : ' post')"></h3>
                <p class="text-[0.8125rem] text-stone-500 mb-4">Tell the creator why. This comment is shared with them.</p>
                <textarea id="bulk-reject-comment" name="comment" x-model="bulkReason" rows="3" placeholder="Reason for rejection…"
                          class="w-full px-3 py-2 text-[0.875rem] border border-stone-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-200 focus:border-transparent resize-none"></textarea>
                <div class="flex justify-end gap-2 mt-4">
                    <button @click="rejectOpen = false" class="px-4 py-2 text-[0.8125rem] font-medium text-stone-600 hover:bg-stone-100 rounded-full">Cancel</button>
                    <button hx-post="{% url 'approvals:bulk_action' workspace_id=workspace.id %}"
                            hx-include="[name='post_ids'], #bulk-reject-comment" hx-vals='{"action": "reject"}' hx-swap="none"
                            :disabled="!bulkReason.trim()"
                            class="px-4 py-2 text-[0.8125rem] font-semibold text-white rounded-full"
                            :class="bulkReason.trim() ? 'bg-red-500 hover:bg-red-600' : 'bg-stone-300 cursor-not-allowed'">Reject all</button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# version-diff modal (loaded via hx-get on the row's "View changes" button) #}
    <div x-show="diffOpen" x-cloak class="fixed inset-0 z-[150] flex items-center justify-center p-4" @click="diffOpen = false">
        <div class="absolute inset-0" style="background: rgba(28,25,23,.42); backdrop-filter: blur(3px);"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full modal-pop max-h-[80vh] overflow-y-auto" style="max-width: 620px;" @click.stop>
            <div class="p-6">
                <div class="flex items-start justify-between mb-3">
                    <h3 class="text-[1.0625rem] font-bold text-stone-900">Version changes</h3>
                    <button @click="diffOpen = false" class="text-stone-400 hover:text-stone-600">
                        <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <div id="diff-modal-body"><p class="text-sm text-stone-400">Loading…</p></div>
            </div>
        </div>
    </div>
</div>