{% extends "base.html" %}
{% load tz %}

{% block title %}Drafts - {{ workspace.name }} - Redea Social{% endblock %}
{% block page_title %}Drafts{% endblock %}

{% block content %}
<div class="max-w-4xl">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-lg font-semibold text-stone-900">Drafts</h2>
            <p class="text-sm text-stone-500 mt-0.5">{{ drafts|length }} draft{{ drafts|length|pluralize }}</p>
        </div>
        <a href="{% url 'composer:compose' workspace_id=workspace.id %}"
           class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold text-white bg-orange-500 rounded-full shadow-[0_4px_14px_rgba(249,115,22,0.28)] hover:bg-orange-600 hover:shadow-[0_6px_20px_rgba(249,115,22,0.35)] hover:-translate-y-px 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>
            New Post
        </a>
    </div>

    {% if drafts %}
    <div class="space-y-3">
        {% for draft in drafts %}
        <a href="{% url 'composer:compose_edit' workspace_id=workspace.id post_id=draft.id %}"
           class="block bg-white border border-stone-200 rounded-xl p-4 hover:shadow-lg hover:border-transparent hover:-translate-y-px transition-all duration-200 group">
            <div class="flex items-start gap-4">
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-stone-700 line-clamp-2 group-hover:text-stone-900 transition-colors">
                        {{ draft.caption_snippet|default:"(No caption)" }}
                    </p>
                    <div class="flex items-center gap-3 mt-2">
                        <span class="inline-flex items-center gap-1 text-xs text-stone-400">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ draft.updated_at|timesince }} ago
                        </span>
                        {% if draft.author %}
                        <span class="text-xs text-stone-400">by {{ draft.author.display_name }}</span>
                        {% endif %}
                        {% if draft.proposed_publish_at %}
                        <span class="inline-flex items-center gap-1 text-xs font-medium text-orange-600 bg-orange-50 px-2 py-0.5 rounded-full" title="Proposed publishing time">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            Proposed Publishing {% timezone workspace.effective_timezone|default:"UTC" %}{{ draft.proposed_publish_at|date:"M j, g:i A" }}{% endtimezone %}
                        </span>
                        {% endif %}
                    </div>
                </div>
                <div class="flex items-center gap-1 flex-shrink-0">
                    {% for platform in draft.platform_posts_summary %}
                    <span class="w-5 h-5 rounded-[5px] flex items-center justify-center text-[8px] font-bold text-white pi-{{ platform }}">
                        {{ platform|truncatechars:2|upper }}
                    </span>
                    {% endfor %}
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-16">
        <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 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
        </div>
        <p class="text-sm font-medium text-stone-500 mb-1">No drafts</p>
        <p class="text-xs text-stone-400 mb-4">Start composing to create your first draft</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">
            Create Post
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}