{% comment %}
List view - table format of posts.
Context: posts, workspace.
{% endcomment %}

<div x-data class="bg-white overflow-x-auto" style="animation: slideUp 200ms cubic-bezier(0.16,1,0.3,1) both">
    {% if posts %}
    <table class="w-full min-w-[600px]">
        <thead>
            <tr class="border-b border-stone-200 text-left">
                <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">Date</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">Platforms</th>
                <th class="px-4 py-3 text-xs font-semibold text-stone-400 uppercase tracking-wider">Author</th>
            </tr>
        </thead>
        <tbody>
            {% for post in 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=post.id %}'">
                <td class="px-4 py-3">
                    <span class="post-chip status-{{ post.status }} inline-flex">
                        <span class="chip-dot"></span>
                        {{ post.get_status_display }}
                    </span>
                </td>
                <td class="px-4 py-3 text-xs text-stone-500 tabular-nums whitespace-nowrap">
                    {% if post.scheduled_at %}
                    {{ post.scheduled_at|date:"M d, Y" }}<br>
                    <span class="text-stone-400">{{ post.scheduled_at|date:"H:i" }}</span>
                    {% else %}
                    <span class="text-stone-300">Not scheduled</span>
                    {% endif %}
                </td>
                <td class="px-4 py-3 text-sm text-stone-600 max-w-xs truncate">
                    {{ post.caption_snippet|default:"(no caption)" }}
                </td>
                <td class="px-4 py-3">
                    <div class="flex gap-1">
                        {% for pp in post.platform_posts.all %}
                        <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>
                        {% endfor %}
                    </div>
                </td>
                <td class="px-4 py-3 text-xs text-stone-500">
                    {{ 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 %}
    <!-- Empty state -->
    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
        </div>
        <p class="text-sm font-medium text-stone-500 mb-1">No content scheduled yet</p>
        <p class="text-xs text-stone-400 mb-5 max-w-[240px] mx-auto">Create your first post to see it on the calendar</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 %}
</div>