{% extends "base.html" %}
{% block title %}Version History - {{ post.caption_snippet }}{% endblock %}

{% block content %}
<div>
    <div class="flex items-center gap-3 mb-6">
        <a href="{% url 'calendar:calendar' workspace_id=workspace.id %}?mode=list&tab=approvals" class="text-stone-400 hover:text-stone-600 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        </a>
        <div>
            <h1 class="text-xl font-bold text-stone-900 tracking-tight">Version History</h1>
            <p class="text-sm text-stone-500 mt-0.5">{{ post.caption_snippet }}</p>
        </div>
    </div>

    <div class="grid grid-cols-12 gap-6">
        <!-- Version list sidebar -->
        <div class="col-span-3">
            <h3 class="text-[0.8125rem] font-semibold text-stone-700 mb-3">Versions</h3>
            <div class="space-y-1">
                {% for v in versions %}
                {% if v.version_number > 1 %}
                <a href="{% url 'approvals:version_diff' workspace_id=workspace.id post_id=post.id %}?v1={{ v.version_number|add:"-1" }}&v2={{ v.version_number }}"
                   class="flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors {% if version_new and v.version_number == version_new.version_number %}bg-stone-100 font-semibold text-stone-900{% else %}text-stone-600 hover:bg-stone-50{% endif %}">
                    <span>v{{ v.version_number }}</span>
                    <span class="text-[0.6875rem] text-stone-400">{{ v.created_at|date:"M j, g:i A" }}</span>
                </a>
                {% else %}
                <div class="flex items-center justify-between px-3 py-2 rounded-lg text-sm {% if version_new and v.version_number == version_new.version_number %}bg-stone-100 font-semibold text-stone-900{% else %}text-stone-600{% endif %}">
                    <span>v1 <span class="text-[0.6875rem] text-stone-400">(initial)</span></span>
                    <span class="text-[0.6875rem] text-stone-400">{{ v.created_at|date:"M j, g:i A" }}</span>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>

        <!-- Diff view -->
        <div class="col-span-9">
            {% if version_old or version_new %}
            <div class="flex items-center gap-2 mb-4">
                {% if version_old %}
                <span class="text-sm text-stone-500">v{{ version_old.version_number }}</span>
                <svg class="w-4 h-4 text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                {% endif %}
                {% if version_new %}
                <span class="text-sm font-semibold text-stone-800">v{{ version_new.version_number }}</span>
                <span class="text-[0.6875rem] text-stone-400">by {{ version_new.created_by.display_name|default:"Unknown" }}</span>
                {% endif %}
            </div>

            {% include "approvals/partials/version_diff.html" %}
            {% else %}
            <p class="text-sm text-stone-400 text-center py-8">No version history available</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}