{% extends "base.html" %}

{% block title %}{{ owner }}/{{ name }} - Guts{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex items-center space-x-2 text-2xl">
        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
        </svg>
        <a href="/{{ owner }}" class="text-green-400 hover:underline">{{ owner }}</a>
        <span class="text-gray-500">/</span>
        <span class="font-bold">{{ name }}</span>
    </div>
    <p class="text-gray-400 mt-2">{{ description }}</p>
</div>

<div class="flex space-x-4 mb-6 border-b border-gray-700 pb-4">
    <a href="/{{ owner }}/{{ name }}" class="flex items-center space-x-2 text-white border-b-2 border-green-500 pb-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
        </svg>
        <span>Code</span>
    </a>
    <a href="/{{ owner }}/{{ name }}/issues" class="flex items-center space-x-2 text-gray-400 hover:text-white">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>Issues</span>
        <span class="bg-gray-700 text-xs px-2 py-1 rounded-full">{{ issue_count }}</span>
    </a>
    <a href="/{{ owner }}/{{ name }}/pulls" class="flex items-center space-x-2 text-gray-400 hover:text-white">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        <span>Pull Requests</span>
        <span class="bg-gray-700 text-xs px-2 py-1 rounded-full">{{ pr_count }}</span>
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
    <div class="lg:col-span-3">
        <!-- Branch selector and file browser -->
        <div class="bg-gray-800 rounded-lg border border-gray-700 mb-6">
            <div class="flex items-center justify-between p-4 border-b border-gray-700">
                <div class="flex items-center space-x-4">
                    <button class="flex items-center space-x-2 bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-md">
                        <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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                        </svg>
                        <span>{{ default_branch }}</span>
                        <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="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <span class="text-gray-500">{{ branch_count }} branches</span>
                </div>
                <div class="flex items-center space-x-2">
                    <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-1 rounded-md flex items-center space-x-2">
                        <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                        <span>Code</span>
                    </button>
                </div>
            </div>

            <!-- File listing -->
            <div class="divide-y divide-gray-700">
                {% for file in files %}
                <a href="/{{ owner }}/{{ name }}/{% if file.is_dir %}tree{% else %}blob{% endif %}/{{ default_branch }}/{{ file.path }}"
                   class="flex items-center space-x-3 px-4 py-2 hover:bg-gray-750">
                    {% if file.is_dir %}
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                    </svg>
                    {% else %}
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    {% endif %}
                    <span class="{% if file.is_dir %}text-blue-400{% else %}text-gray-100{% endif %}">{{ file.name }}</span>
                </a>
                {% endfor %}

                {% if files.is_empty() %}
                <div class="px-4 py-8 text-center text-gray-500">
                    <p>This repository is empty.</p>
                    <p class="mt-2">Push some code to get started!</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- README -->
        {% if readme_html.is_some() %}
        <div class="bg-gray-800 rounded-lg border border-gray-700 p-6">
            <div class="flex items-center space-x-2 mb-4 pb-4 border-b border-gray-700">
                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <span class="font-medium">README.md</span>
            </div>
            <div class="markdown-body">
                {{ readme_html.as_ref().unwrap()|safe }}
            </div>
        </div>
        {% endif %}
    </div>

    <div class="lg:col-span-1">
        <!-- About -->
        <div class="bg-gray-800 rounded-lg border border-gray-700 p-4 mb-6">
            <h3 class="font-bold mb-4">About</h3>
            <p class="text-gray-400 text-sm mb-4">{{ description }}</p>
            <div class="space-y-2 text-sm text-gray-400">
                <div class="flex items-center space-x-2">
                    <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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                    <span>{{ branch_count }} branches</span>
                </div>
            </div>
        </div>

        <!-- Clone URLs -->
        <div class="bg-gray-800 rounded-lg border border-gray-700 p-4">
            <h3 class="font-bold mb-4">Clone</h3>
            <div class="space-y-2">
                <div>
                    <label class="text-xs text-gray-400">HTTP</label>
                    <div class="flex">
                        <input type="text" readonly value="{{ clone_url }}"
                               class="flex-1 bg-gray-700 text-sm px-3 py-2 rounded-l-md border border-gray-600 focus:outline-none">
                        <button class="bg-gray-600 hover:bg-gray-500 px-3 rounded-r-md border border-l-0 border-gray-600">
                            <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}