{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-4xl mx-auto px-4 pt-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <a href="/orgs/{{ org_name }}/projects" class="text-sm text-gray-500 hover:text-gray-700">&larr; {{ org_name }}</a>
            <h1 class="text-2xl font-bold mt-1">{{ project_name }}</h1>
        </div>
    </div>

    <h2 class="font-bold text-lg mb-4">Recent releases</h2>

    {% if artifacts %}
    <div class="space-y-4">
        {% for artifact in artifacts %}
        <div class="p-4 border border-gray-200 rounded-lg">
            <div class="flex items-center justify-between">
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2">
                        <a href="/orgs/{{ org_name }}/projects/{{ project_name }}/releases/{{ artifact.slug }}" class="font-medium text-gray-900 hover:text-blue-600">{{ artifact.title }}</a>
                        {% if artifact.version %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">{{ artifact.version }}</span>
                        {% endif %}
                    </div>
                    {% if artifact.description %}
                    <p class="text-sm text-gray-600 mt-1">{{ artifact.description }}</p>
                    {% endif %}
                    {% if artifact.branch or artifact.commit_sha %}
                    <div class="flex items-center gap-2 mt-2 text-xs text-gray-500">
                        {% if artifact.branch %}
                        <span class="inline-flex items-center px-1.5 py-0.5 rounded bg-blue-50 text-blue-700 font-mono">{{ artifact.branch }}</span>
                        {% endif %}
                        {% if artifact.commit_sha %}
                        <span class="font-mono">{{ artifact.commit_sha[:8] }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% if artifact.source_user %}
                    <p class="text-xs text-gray-400 mt-1">by {{ artifact.source_user }}{% if artifact.source_type %} via {{ artifact.source_type }}{% endif %}</p>
                    {% endif %}
                    {% if artifact.destinations %}
                    <div class="flex gap-1.5 mt-2">
                        {% for dest in artifact.destinations %}
                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600">{{ dest.name }} ({{ dest.environment }})</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                <div class="text-right text-sm text-gray-500 shrink-0 ml-4">
                    <p class="font-mono">{{ artifact.slug }}</p>
                    <p>{{ artifact.created_at }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="p-6 border border-gray-200 rounded-lg text-center">
        <p class="text-gray-600">No releases yet.</p>
        <p class="text-sm text-gray-400 mt-2">Create a release with <code class="bg-gray-100 px-1 rounded">forest release create</code></p>
    </div>
    {% endif %}
</section>
{% endblock %}