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

{% block content %}
<section class="max-w-4xl mx-auto px-4 pt-12">
    <div class="mb-8">
        <a href="/orgs/{{ org_name }}/projects/{{ project_name }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; {{ project_name }}</a>
        <div class="flex items-center gap-3 mt-1">
            <h1 class="text-2xl font-bold">{{ artifact.title }}</h1>
            {% if artifact.version %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded text-sm font-medium bg-green-100 text-green-800">{{ artifact.version }}</span>
            {% endif %}
        </div>
        <p class="text-sm text-gray-500 mt-1 font-mono">{{ artifact.slug }}</p>
    </div>

    {% if artifact.description %}
    <div class="mb-6">
        <p class="text-gray-700">{{ artifact.description }}</p>
    </div>
    {% endif %}

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Git info -->
        {% if artifact.commit_sha or artifact.branch %}
        <div class="p-4 border border-gray-200 rounded-lg">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">Git</h3>
            <dl class="space-y-2 text-sm">
                {% if artifact.branch %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Branch</dt>
                    <dd class="font-mono text-blue-700">{{ artifact.branch }}</dd>
                </div>
                {% endif %}
                {% if artifact.commit_sha %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Commit</dt>
                    <dd class="font-mono">{{ artifact.commit_sha[:8] }}</dd>
                </div>
                {% endif %}
                {% if artifact.commit_message %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Message</dt>
                    <dd class="text-gray-700 truncate ml-4">{{ artifact.commit_message }}</dd>
                </div>
                {% endif %}
                {% if artifact.repo_url %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Repository</dt>
                    <dd><a href="{{ artifact.repo_url }}" class="text-blue-600 hover:underline" target="_blank" rel="noopener">View repo</a></dd>
                </div>
                {% endif %}
            </dl>
        </div>
        {% endif %}

        <!-- Source info -->
        {% if artifact.source_user or artifact.source_type %}
        <div class="p-4 border border-gray-200 rounded-lg">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">Source</h3>
            <dl class="space-y-2 text-sm">
                {% if artifact.source_user %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Created by</dt>
                    <dd class="text-gray-700">{{ artifact.source_user }}</dd>
                </div>
                {% endif %}
                {% if artifact.source_email %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Email</dt>
                    <dd class="text-gray-700">{{ artifact.source_email }}</dd>
                </div>
                {% endif %}
                {% if artifact.source_type %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">Type</dt>
                    <dd class="text-gray-700">{{ artifact.source_type }}</dd>
                </div>
                {% endif %}
                {% if artifact.run_url %}
                <div class="flex justify-between">
                    <dt class="text-gray-500">CI Run</dt>
                    <dd><a href="{{ artifact.run_url }}" class="text-blue-600 hover:underline" target="_blank" rel="noopener">View run</a></dd>
                </div>
                {% endif %}
            </dl>
        </div>
        {% endif %}
    </div>

    <!-- Links -->
    {% if artifact.web or artifact.pr %}
    <div class="mb-8">
        <h3 class="text-sm font-semibold text-gray-900 mb-3">Links</h3>
        <div class="flex gap-3">
            {% if artifact.web %}
            <a href="{{ artifact.web }}" class="inline-flex items-center px-3 py-1.5 border border-gray-200 rounded-md text-sm text-gray-700 hover:bg-gray-50" target="_blank" rel="noopener">Web</a>
            {% endif %}
            {% if artifact.pr %}
            <a href="{{ artifact.pr }}" class="inline-flex items-center px-3 py-1.5 border border-gray-200 rounded-md text-sm text-gray-700 hover:bg-gray-50" target="_blank" rel="noopener">Pull request</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Destinations -->
    {% if artifact.destinations %}
    <div class="mb-8">
        <h3 class="text-sm font-semibold text-gray-900 mb-3">Destinations</h3>
        <div class="space-y-2">
            {% for dest in artifact.destinations %}
            <div class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">{{ dest.environment }}</span>
                <span class="text-sm text-gray-900">{{ dest.name }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="text-sm text-gray-500">
        <p>Created {{ artifact.created_at }}</p>
    </div>
</section>
{% endblock %}