{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="text-4xl font-extrabold text-center text-gray-800 mb-12">نمونه کارها</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
        {% for project in projects_list %}
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden group transform hover:-translate-y-2 transition-all duration-300 ease-in-out">
            <div class="relative">
                {% if project.image %}
                    <img class="w-full h-56 object-cover" src="{{ project.image.url }}" alt="{{ project.title }}">
                {% else %}
                    <div class="w-full h-56 bg-gray-100 flex items-center justify-center">
                        <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                {% endif %}
            </div>

            <div class="p-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-2 truncate">{{ project.title }}</h2>
                <p class="text-gray-600 mb-4 h-20 overflow-hidden">{{ project.description|truncatewords:25 }}</p>
                <a href="{% url 'project_detail' project.pk %}" class="mt-4 inline-block w-full text-center bg-indigo-600 text-white font-semibold py-3 px-4 rounded-lg hover:bg-indigo-700 transition duration-300">
                    مشاهده جزئیات
                </a>
            </div>
        </div>
        {% empty %}
        <div class="col-span-full text-center py-16 bg-white/70 backdrop-blur-md rounded-lg shadow-xl">
            <p class="text-gray-600 text-xl">در حال حاضر هیچ نمونه کاری برای نمایش وجود ندارد.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}