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

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

{% block content %}
{% include "core/sections/page_header.html" with title="Projects" description="Explore my latest work and projects" %}

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {% for project in projects %}
        <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="h-40">
                {% if project.image %}
                    <img src="{{ project.image.url }}" 
                         alt="{{ project.title }}" 
                         class="w-full h-full object-cover">
                {% else %}
                    <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                        <span class="text-gray-400">No image</span>
                    </div>
                {% endif %}
            </div>
            <div class="p-6">
                <h2 class="text-xl font-bold mb-2">{{ project.title }}</h2>
                <p class="text-gray-600 mb-4 line-clamp-3">{{ project.description }}</p>
                <div class="flex flex-wrap gap-2 mb-4">
                    {% for tech in project.technology.split %}
                    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">{{ tech }}</span>
                    {% endfor %}
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{% url 'core:project_detail' project.slug %}" 
                       class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                        View Details
                    </a>
                    {% if project.url %}
                    <a href="{{ project.url }}" target="_blank" 
                       class="inline-block bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                        Live Demo
                    </a>
                    {% endif %}
                    {% if project.github_url %}
                    <a href="{{ project.github_url }}" target="_blank"
                       class="inline-block bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition-colors">
                        GitHub
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-span-3 text-center py-8">
            <p class="text-gray-600">No projects added yet.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}