{% extends "base.html" %}
{% load humanize %}
{% load static %}
{% block title %}
    {{ project.name }} - Project Details
{% endblock title %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- Breadcrumb Navigation -->
        <nav class="mb-8 text-sm">
            <ol class="list-none p-0 inline-flex">
                <li class="flex items-center">
                    <a href="{% url 'project_list' %}"
                       class="text-red-600 hover:text-red-800">Projects</a>
                    <svg class="w-3 h-3 mx-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                </li>
                <li class="text-gray-700">{{ project.name }}</li>
            </ol>
        </nav>
        <!-- Organization Banner (if exists) -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-8">
            {% if project.organization %}
                <div class="relative h-32 bg-gradient-to-r from-gray-800 to-gray-900">
                    <!-- Organization Background Pattern -->
                    <div class="absolute inset-0 opacity-10">
                        <svg class="w-full h-full"
                             width="100%"
                             height="100%"
                             viewBox="0 0 100 100"
                             preserveAspectRatio="none">
                            <defs>
                            <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                            <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" />
                            </pattern>
                            </defs>
                            <rect width="100" height="100" fill="url(#grid)" />
                        </svg>
                    </div>
                    <div class="relative flex items-center h-full px-8">
                        <div class="flex items-center gap-6">
                            {% if project.organization.logo %}
                                <img src="{{ project.organization.logo.url }}"
                                     width="50"
                                     height="50"
                                     alt="{{ project.organization.name }}"
                                     class="w-20 h-20 rounded-lg ring-4 ring-white/10 shadow-xl">
                            {% else %}
                                <div class="w-20 h-20 rounded-lg bg-white/10 flex items-center justify-center ring-4 ring-white/10">
                                    <span class="text-3xl text-white font-bold">{{ project.organization.name|slice:":1"|upper }}</span>
                                </div>
                            {% endif %}
                            <div>
                                <div class="text-white/60 text-sm font-medium mb-1">Organization</div>
                                <h2 class="text-2xl font-bold text-white">{{ project.organization.name }}</h2>
                                {% if project.organization.description %}
                                    <p class="text-white/80 mt-2 max-w-2xl">{{ project.organization.description }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="relative h-32 bg-gradient-to-r from-gray-100 to-gray-50 flex items-center px-8">
                    <div class="max-w-3xl">
                        <div class="text-gray-400 text-sm font-medium mb-1">Organization</div>
                        <h2 class="text-xl text-gray-600">This is an independent project not associated with any organization</h2>
                    </div>
                </div>
            {% endif %}
        </div>
        <!-- Project Header -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 mb-8">
            <div class="bg-gradient-to-r from-red-500 to-red-600 p-6">
                <div class="flex items-start gap-6">
                    {% if project.logo %}
                        <img src="{{ project.logo.url }}"
                             width="60"
                             height="60"
                             alt="{{ project.name }}"
                             class="w-24 h-24 rounded-lg shadow-lg">
                    {% else %}
                        <div class="w-24 h-24 rounded-lg bg-white/20 flex items-center justify-center">
                            <span class="text-3xl text-white font-bold">{{ project.name|slice:":1"|upper }}</span>
                        </div>
                    {% endif %}
                    <div class="flex-grow">
                        <h1 class="text-3xl font-bold text-white mb-2">{{ project.name }}</h1>
                        <p class="text-white/90 text-lg">{{ project.description }}</p>
                        <!-- Project Links -->
                        <div class="flex gap-4 mt-4">
                            {% if project.url %}
                                <a href="{{ project.url }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="inline-flex items-center px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
                                        <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
                                    </svg>
                                    Website
                                </a>
                            {% endif %}
                            {% if project.twitter %}
                                <a href="{{ project.twitter }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="inline-flex items-center px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                                    </svg>
                                    Twitter
                                </a>
                            {% endif %}
                            {% if project.facebook %}
                                <a href="{{ project.facebook }}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="inline-flex items-center px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition">
                                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 2C6.48 2 2 6.48 2 12c0 4.94 3.63 9.02 8.35 9.8V15.5H7.5v-3h2.85V10.7c0-2.82 1.68-4.38 4.25-4.38 1.23 0 2.55.22 2.55.22v2.82h-1.43c-1.41 0-1.85.87-1.85 1.77v2.13h3l-.3 3h-2.7v6.5C18.37 21.02 22 16.94 22 12c0-5.52-4.48-10-10-10z" />
                                    </svg>
                                    Facebook
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <!-- Project Metrics -->
            <div class="p-6 bg-gray-50 border-t border-gray-200">
                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                        <div class="text-sm text-gray-500">Total Stars</div>
                        <div class="text-2xl font-bold text-gray-900">{{ repo_metrics.total_stars|default:"0"|intcomma }}</div>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                        <div class="text-sm text-gray-500">Total Forks</div>
                        <div class="text-2xl font-bold text-gray-900">{{ repo_metrics.total_forks|default:"0"|intcomma }}</div>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                        <div class="text-sm text-gray-500">Total Issues</div>
                        <div class="text-2xl font-bold text-gray-900">{{ repo_metrics.total_issues|default:"0"|intcomma }}</div>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                        <div class="text-sm text-gray-500">Contributors</div>
                        <div class="text-2xl font-bold text-gray-900">{{ repo_metrics.total_contributors|default:"0"|intcomma }}</div>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                        <div class="text-sm text-gray-500">Total Commits</div>
                        <div class="text-2xl font-bold text-gray-900">{{ repo_metrics.total_commits|default:"0"|intcomma }}</div>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
                        <div class="text-sm text-gray-500">Open PRs</div>
                        <div class="text-2xl font-bold text-gray-900">{{ repo_metrics.total_prs|default:"0"|intcomma }}</div>
                    </div>
                </div>
            </div>
            <!-- Badge URL Section -->
            <div class="p-6 bg-gray-50 border-t border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Project View Count Badge</h3>
                <div class="flex flex-col gap-4">
                    <!-- HTML Format -->
                    <div class="space-y-2">
                        <div class="text-gray-700 font-medium">HTML:</div>
                        <div class="relative">
                            <input type="text"
                                   readonly
                                   value='&lt;img alt="Views" src="{{ request.scheme }}://{{ request.get_host }}{% url 'project-badge' project.slug %}" &gt;'
                                   class="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg pr-24 font-mono text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent"
                                   id="badge-url-html">
                            <button onclick="copyToClipboard('badge-url-html')"
                                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 bg-red-500 hover:bg-red-600 text-white text-sm rounded-md transition-colors">
                                Copy
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Associated Repositories -->
        <div class="grid gap-6">
            <h2 class="text-2xl font-bold text-gray-900">Associated Repositories</h2>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {% for repo in repositories %}
                    <div class="bg-white rounded-xl border-2 border-gray-200 hover:border-red-500 transition-all duration-200 hover:shadow-lg">
                        <div class="p-6">
                            <a href="{% url 'repo_detail' repo.slug %}"
                               class="flex items-center justify-between mb-4">
                                <h3 class="text-xl font-bold text-gray-800">{{ repo.name }}</h3>
                                {% if repo.is_main %}
                                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">Main</span>
                                {% elif repo.is_wiki %}
                                    <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Wiki</span>
                                {% endif %}
                            </a>
                            {% if repo.description %}<p class="text-gray-600 text-base leading-relaxed mb-6">{{ repo.description }}</p>{% endif %}
                            <!-- Repository Stats -->
                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
                                <div class="flex items-center space-x-2">
                                    <span class="text-base">⭐</span>
                                    <span class="text-base font-medium">{{ repo.stars|intcomma }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="text-base">🍴</span>
                                    <span class="text-base font-medium">{{ repo.forks|intcomma }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="text-base">🐛</span>
                                    <span class="text-base font-medium">{{ repo.open_issues|intcomma }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="text-base">👥</span>
                                    <span class="text-base font-medium">{{ repo.contributor_count|intcomma }}</span>
                                </div>
                            </div>
                            <!-- Additional Repository Info -->
                            <div class="space-y-3 border-t border-gray-200 pt-4">
                                {% if repo.primary_language %}
                                    <div class="flex items-center text-sm text-gray-600">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                        Primary Language: {{ repo.primary_language }}
                                    </div>
                                {% endif %}
                                {% if repo.license %}
                                    <div class="flex items-center text-sm text-gray-600">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 2a1 1 0 00-1 1v1.323l-3.954 1.582A1 1 0 004 6.82v4.286a1 1 0 00.491.858l3.772 2.378a1 1 0 001.474 0l3.772-2.378A1 1 0 0014 11.105V6.82a1 1 0 00-.546-.915L9.5 4.323V3a1 1 0 00-1-1zm0 1.5v1.323l3.954 1.582v4.286l-3.772 2.378L6.41 10.69V6.404L10 4.823z" clip-rule="evenodd" />
                                        </svg>
                                        License: {{ repo.license }}
                                    </div>
                                {% endif %}
                                {% if repo.last_commit_date %}
                                    <div class="flex items-center text-sm text-gray-600">
                                        <svg class="w-4 h-4 mr-2" 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>
                                        Last Commit: {{ repo.last_commit_date|date:"M d, Y" }}
                                    </div>
                                {% endif %}
                                {% if repo.release_name %}
                                    <div class="flex items-center text-sm text-gray-600">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                        </svg>
                                        Latest Release: {{ repo.release_name }}
                                        {% if repo.release_datetime %}({{ repo.release_datetime|date:"M d, Y" }}){% endif %}
                                    </div>
                                {% endif %}
                            </div>
                            <!-- Repository Actions -->
                            <div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
                                <div class="text-sm text-gray-500">Updated {{ repo.last_updated|naturaltime }}</div>
                                <div class="flex gap-3">
                                    {% if repo.homepage_url %}
                                        <a href="{{ repo.homepage_url }}"
                                           target="_blank"
                                           class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                            <svg class="w-4 h-4 mr-2"
                                                 fill="none"
                                                 stroke="currentColor"
                                                 viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064" />
                                            </svg>
                                            Website
                                        </a>
                                    {% endif %}
                                    <a href="{{ repo.repo_url }}"
                                       target="_blank"
                                       class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-500 hover:bg-red-600">
                                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
                                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                                        </svg>
                                        View on GitHub
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="col-span-full text-center py-8">
                        <p class="text-gray-500 text-lg">No repositories found for this project.</p>
                    </div>
                {% endfor %}
            </div>
        </div>
        <!-- Project Timeline/History -->
        <div class="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 class="text-xl font-bold text-gray-900 mb-4">Project Timeline on {{ site_name }}</h2>
            <div class="space-y-4">
                <div class="flex items-center text-sm text-gray-600">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                    </svg>
                    Created: {{ created_date.full }} ({{ created_date.relative }})
                </div>
                <div class="flex items-center text-sm text-gray-600">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                    </svg>
                    Last Updated: {{ modified_date.full }} ({{ modified_date.relative }})
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block after_js %}
    <script>
    function copyToClipboard(elementId) {
        const element = document.getElementById(elementId);
        
        // Select the text
        element.select();
        element.setSelectionRange(0, 99999); // For mobile devices

        // Copy the text
        try {
            navigator.clipboard.writeText(element.value).then(() => {
                // Get the button
                const button = element.nextElementSibling;
                const originalText = button.textContent;
                
                // Change button style to show success
                button.textContent = 'Copied!';
                button.classList.remove('bg-red-500', 'hover:bg-red-600');
                button.classList.add('bg-green-500', 'hover:bg-green-600');
                
                // Reset button after 2 seconds
                setTimeout(() => {
                    button.textContent = originalText;
                    button.classList.remove('bg-green-500', 'hover:bg-green-600');
                    button.classList.add('bg-red-500', 'hover:bg-red-600');
                }, 2000);
            });
        } catch (err) {
            console.error('Failed to copy text: ', err);
        }
    }
    </script>
{% endblock after_js %}