{% if render_tab_counts_oob %}{% include "calendar/partials/_tab_counts_oob.html" %}{% endif %}
{% comment %}
Drafts tab partial for the Publish page.
Shows all draft platform posts in a table. Loaded via HTMX into #tab-content.
{% endcomment %}
{% load tz %}

<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">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>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Last Updated</th>
                <th class="px-4 py-3 w-10"></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>
                    {% 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 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>
                <td class="px-4 py-3 text-xs text-stone-500 tabular-nums whitespace-nowrap">
                    {{ pp.post.updated_at|timesince }} ago
                    {% if pp.post.proposed_publish_at %}
                    <span class="block text-[0.6875rem] text-orange-500" title="Proposed publishing time">Proposed Publishing {% timezone display_timezone %}{{ pp.post.proposed_publish_at|date:"M j, g:i A" }}{% endtimezone %}</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-right" @click.stop>
                    {% include "calendar/partials/_post_actions_menu.html" with post_id=pp.post_id account_id=pp.social_account_id %}
                </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="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        </div>
        <p class="text-sm font-medium text-stone-500 mb-1">No drafts</p>
        <p class="text-xs text-stone-400 mb-5 max-w-[240px] mx-auto">Draft posts will appear here as you create them</p>
        <a href="{% url 'composer:compose' workspace_id=workspace.id %}"
           class="inline-flex items-center gap-1.5 px-5 py-1.5 text-sm font-semibold text-orange-600 bg-orange-50 border border-orange-200 rounded-full hover:bg-orange-100 hover:border-orange-300 active:bg-orange-100 transition-all duration-150">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Create Post
        </a>
    </div>
    {% endif %}
    {% endif %}
    {% include "calendar/partials/_delete_post_modal.html" %}
</div>