{% extends "core/base.html" %}

{% block title %}{{ project.title }} - {{ personal_info.name }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <a href="{% url 'core:project_list' %}" class="text-blue-600 hover:text-blue-800 mb-6 inline-block">
        ← Back to Projects
    </a>
    
    <article class="bg-white rounded-lg shadow-lg">
        {% if project.image %}
        <div class="w-full h-96 overflow-hidden">
            <img src="{{ project.image.url }}" 
                 alt="{{ project.title }}" 
                 class="w-full h-full object-cover">
        </div>
        {% endif %}
        
        <div class="p-8">
            <h1 class="text-4xl font-bold mb-4">{{ project.title }}</h1>
            
            <div class="prose max-w-none mb-8">
                {{ project.detailed_description|linebreaks }}
            </div>
            
            <div class="flex flex-wrap gap-2 mb-8">
                {% for tech in project.technology.split %}
                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full">{{ tech }}</span>
                {% endfor %}
            </div>
            
            {% if project.gallery_images.exists %}
            <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">Project Gallery</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for img in project.gallery_images.all %}
                    <div class="relative aspect-video overflow-hidden rounded-lg">
                        <img src="{{ img.image.url }}" 
                             alt="{{ img.caption }}" 
                             class="w-full h-full object-cover">
                        {% if img.caption %}
                        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2">
                            {{ img.caption }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            <div class="flex gap-4">
                {% if project.url %}
                <a href="{{ project.url }}" target="_blank" 
                   class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                    View Live Project
                </a>
                {% endif %}
                
                {% if project.github_url %}
                <a href="{{ project.github_url }}" target="_blank"
                   class="bg-gray-800 text-white px-6 py-2 rounded-lg hover:bg-gray-900 transition-colors">
                    View on GitHub
                </a>
                {% endif %}
            </div>
        </div>
    </article>
</div>
{% endblock %}