{% extends "client_portal/portal_base.html" %}
{% load humanize %}
{% block title %}Published Content - {{ workspace.name }}{% endblock %}

{% block content %}
<div>
    <div class="mb-6">
        <h1 class="text-xl font-bold tracking-tight" style="color: var(--text-primary);">Published Content</h1>
        <p class="text-sm mt-0.5" style="color: var(--text-secondary);">Posts that have been published to your social channels</p>
    </div>

    <div class="space-y-3">
        {% for post in posts %}
        <div class="rounded-xl border p-5 transition-all hover:shadow-md"
             style="background: var(--surface-0); border-color: var(--border);">
            <div class="flex items-start gap-4">
                <!-- Media thumbnail -->
                {% with first_media=post.media_attachments.first %}
                {% if first_media and first_media.media_asset.thumbnail %}
                <img src="{{ first_media.media_asset.thumbnail.url }}" alt="" class="w-16 h-16 rounded-lg object-cover flex-shrink-0" style="border: 1px solid var(--border);">
                {% endif %}
                {% endwith %}

                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                        {% for pp in post.platform_posts.all %}
                        <span class="text-[0.6875rem] font-semibold px-2 py-0.5 rounded-full" style="background: var(--surface-2); color: var(--text-secondary);">
                            {{ pp.social_account.get_platform_display }}
                        </span>
                        {% endfor %}
                        <span class="text-[0.6875rem] ml-auto flex-shrink-0" style="color: var(--text-tertiary);">
                            {{ post.published_at|date:"M j, Y" }}
                        </span>
                    </div>
                    <p class="text-[0.8125rem] leading-relaxed line-clamp-2" style="color: var(--text-primary);">
                        {{ post.caption_snippet }}
                    </p>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="text-center py-16">
            <svg class="mx-auto w-14 h-14 mb-3" style="color: var(--neutral-300);" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"/></svg>
            <p class="font-medium" style="color: var(--text-secondary);">No published posts yet</p>
            <p class="text-sm mt-1" style="color: var(--text-tertiary);">Published content will appear here</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}