{% extends "base.html" %}

{% block title %}Actions - {{ owner }}/{{ repo }} - Guts{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Repository header -->
    <div class="flex items-center space-x-2 text-gray-400">
        <a href="/{{ owner }}" class="hover:text-blue-400">{{ owner }}</a>
        <span>/</span>
        <a href="/{{ owner }}/{{ repo }}" class="hover:text-blue-400 font-semibold text-white">{{ repo }}</a>
    </div>

    <!-- Navigation tabs -->
    <div class="border-b border-gray-700">
        <nav class="flex space-x-8">
            <a href="/{{ owner }}/{{ repo }}" class="border-b-2 border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 py-4 px-1 text-sm font-medium">
                Code
            </a>
            <a href="/{{ owner }}/{{ repo }}/pulls" class="border-b-2 border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 py-4 px-1 text-sm font-medium">
                Pull Requests
            </a>
            <a href="/{{ owner }}/{{ repo }}/issues" class="border-b-2 border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-300 py-4 px-1 text-sm font-medium">
                Issues
            </a>
            <a href="/{{ owner }}/{{ repo }}/actions" class="border-b-2 border-green-500 text-white py-4 px-1 text-sm font-medium">
                Actions
            </a>
        </nav>
    </div>

    <!-- Main content -->
    <div class="grid grid-cols-4 gap-6">
        <!-- Left sidebar - Workflows -->
        <div class="col-span-1">
            <h3 class="text-lg font-semibold mb-4">Workflows</h3>
            {% if workflows.is_empty() %}
                <p class="text-gray-500 text-sm">No workflows configured</p>
            {% else %}
                <ul class="space-y-2">
                {% for workflow in workflows %}
                    <li>
                        <a href="/{{ owner }}/{{ repo }}/actions/workflows/{{ workflow.id }}"
                           class="block px-3 py-2 rounded-md hover:bg-gray-800 text-sm">
                            <div class="font-medium text-white">{{ workflow.name }}</div>
                            <div class="text-xs text-gray-500">{{ workflow.path }}</div>
                        </a>
                    </li>
                {% endfor %}
                </ul>
            {% endif %}
        </div>

        <!-- Main content - Recent runs -->
        <div class="col-span-3">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold">All workflow runs</h2>
            </div>

            {% if runs.is_empty() %}
                <div class="bg-gray-800 rounded-lg p-8 text-center">
                    <svg class="w-16 h-16 mx-auto text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                    <h3 class="text-lg font-medium text-gray-300 mb-2">No workflow runs yet</h3>
                    <p class="text-gray-500">Workflow runs will appear here when triggered by pushes, PRs, or manual dispatch.</p>
                </div>
            {% else %}
                <div class="space-y-2">
                {% for run in runs %}
                    <a href="/{{ owner }}/{{ repo }}/actions/runs/{{ run.id }}"
                       class="block bg-gray-800 rounded-lg p-4 hover:bg-gray-750 border border-gray-700">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <!-- Status icon -->
                                {% if run.conclusion.as_deref() == Some("success") %}
                                    <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                    </svg>
                                {% else if run.conclusion.as_deref() == Some("failure") %}
                                    <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                    </svg>
                                {% else if run.status == "in_progress" %}
                                    <svg class="w-5 h-5 text-yellow-500 animate-spin" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                {% else %}
                                    <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                                    </svg>
                                {% endif %}

                                <div>
                                    <div class="font-medium text-white">{{ run.workflow_name }}</div>
                                    <div class="text-sm text-gray-500">
                                        #{{ run.number }} triggered by {{ run.trigger_type }}
                                        {% if let Some(branch) = run.head_branch.as_ref() %}
                                            on <span class="text-blue-400">{{ branch }}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="text-right text-sm text-gray-500">
                                <div>{{ run.head_sha|truncate(7) }}</div>
                                <div>Run #{{ run.number }}</div>
                            </div>
                        </div>
                    </a>
                {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}