{% if render_tab_counts_oob %}{% include "calendar/partials/_tab_counts_oob.html" %}{% endif %}
{% comment %}
Sent tab partial for the Publish page.
Shows all published/partially_published platform posts. Loaded via HTMX into #tab-content.
{% endcomment %}

<div x-data{% if is_htmx %} class="tab-slide-in"{% endif %}>
    {% if platform_posts %}
    <table class="w-full">
        <thead>
            <tr class="border-b border-stone-200 text-left">
                <th class="pl-4 w-8"></th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Media</th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Status</th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Published</th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Caption</th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Platform</th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Author</th>
            </tr>
        </thead>
        <tbody>
            {% for pp in platform_posts %}
            <tr class="border-b border-stone-100 hover:bg-stone-50 transition-colors duration-100 cursor-pointer"
                @click="window.location='{% url 'composer:compose_edit' workspace_id=workspace.id post_id=pp.post_id %}?account={{ pp.social_account_id }}'">
                <td class="pl-4 pr-1 py-3" @click.stop>
                    {# published rows are protected — every bulk action skips them, so no checkbox. `failed` rows stay selectable (retry / delete). #}
                    {% if pp.is_bulk_selectable %}{% include "calendar/partials/_select_checkbox.html" with pp_id=pp.id extra_class="row-select-box" %}{% endif %}
                </td>
                <td class="px-4 py-3">
                    {% with first_att=pp.post.media_attachments.all.0 %}
                    {% if first_att %}
                    <div class="w-10 h-10 rounded-lg overflow-hidden bg-stone-100 flex-shrink-0 relative">
                        {% if first_att.media_asset.thumbnail %}
                            <img src="{{ first_att.media_asset.thumbnail.url }}" alt="" class="w-full h-full object-cover">
                        {% elif first_att.media_asset.media_type == 'image' or first_att.media_asset.media_type == 'gif' %}
                            <img src="{{ first_att.media_asset.file.url }}" alt="" class="w-full h-full object-cover">
                        {% else %}
                            <video src="{{ first_att.media_asset.file.url }}#t=0.5" class="w-full h-full object-cover" muted preload="metadata"></video>
                        {% endif %}
                        {% if first_att.media_asset.media_type == 'video' %}
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-4 h-4 rounded-full bg-black/50 flex items-center justify-center">
                                <svg class="w-2 h-2 text-white ml-px" fill="currentColor" viewBox="0 0 24 24"><path d="M5 3l14 9-14 9V3z"/></svg>
                            </div>
                        </div>
                        {% endif %}
                        {% if pp.post.media_attachments.count > 1 %}
                        <div class="absolute bottom-0 right-0 bg-black/60 text-white text-[9px] font-bold px-1 rounded-tl">
                            +{{ pp.post.media_attachments.count|add:"-1" }}
                        </div>
                        {% endif %}
                    </div>
                    {% else %}
                    <div class="w-10 h-10 rounded-lg bg-stone-50 flex items-center justify-center">
                        <svg class="w-4 h-4 text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    {% endif %}
                    {% endwith %}
                </td>
                <td class="px-4 py-3">
                    <span class="post-chip status-{{ pp.status }} inline-flex">
                        <span class="chip-dot"></span>
                        {{ pp.get_status_display }}
                    </span>
                    {% if pp.status == "failed" and pp.publish_error %}
                    <p class="text-[11px] text-red-500 mt-1 max-w-[220px] truncate" title="{{ pp.publish_error }}">{{ pp.publish_error }}</p>
                    {% endif %}
                    {% comment %}
                    Published, but its first comment never landed — amber, not red:
                    the post itself went out fine.
                    {% endcomment %}
                    {% if pp.first_comment_status == "failed" %}
                    <p class="text-[11px] text-amber-600 mt-1 max-w-[220px] truncate" title="{{ pp.first_comment_error }}">First comment failed</p>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-xs text-stone-500 tabular-nums whitespace-nowrap">
                    {% if pp.post.scheduled_at %}
                    {{ pp.post.scheduled_at|date:"M d, Y" }}<br>
                    <span class="text-stone-400">{{ pp.post.scheduled_at|date:"H:i" }}</span>
                    {% else %}
                    <span class="text-stone-300">-</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-stone-600 max-w-xs truncate">
                    {{ pp.post.title|default:pp.post.caption_snippet|default:"(no caption)" }}
                </td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-1.5">
                        <span class="w-5 h-5 rounded-[5px] flex items-center justify-center">
                            {% include "partials/_platform_icon.html" with platform=pp.social_account.platform size="sm" %}
                        </span>
                        <span class="text-xs text-stone-500">{{ pp.social_account.account_name|default:pp.social_account.account_handle }}</span>
                    </div>
                </td>
                <td class="px-4 py-3 text-xs text-stone-500">
                    {{ pp.post.author.display_name|default:"-" }}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    {% if not has_connected_accounts %}
    {% include "calendar/partials/_no_channels_empty_state.html" %}
    {% else %}
    <div class="text-center py-20 px-6">
        <div class="w-16 h-16 mx-auto rounded-2xl bg-stone-100 flex items-center justify-center mb-4">
            <svg class="w-7 h-7 text-stone-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <p class="text-sm font-medium text-stone-500 mb-1">No sent posts yet</p>
        <p class="text-xs text-stone-400 mb-5 max-w-[240px] mx-auto">Published posts will appear here after they go live</p>
    </div>
    {% endif %}
    {% endif %}
</div>