{% extends "base.html" %}

{% block content %}
<div class="max-w-4xl mx-auto bg-white/80 backdrop-blur-md rounded-lg shadow-xl p-6 md:p-8 overflow-hidden">
    
    <!-- بخش اصلاح شده برای نمایش عکس -->
    {% if project.image %}
        <img class="w-full h-auto max-h-96 object-contain rounded-lg mb-6" src="{{ project.image.url }}" alt="{{ project.title }}">
    {% else %}
        <div class="w-full h-auto max-h-96 bg-gray-200 flex items-center justify-center rounded-lg mb-6" style="height: 24rem;">
            <span class="text-gray-500">این پروژه تصویر ندارد</span>
        </div>
    {% endif %}
    
    <!-- عنوان پروژه -->
    <h1 class="text-4xl font-bold text-gray-800 mb-4">{{ project.title }}</h1>
    
    <!-- توضیحات کامل پروژه -->
    <div class="text-lg text-gray-700 leading-relaxed mb-8 prose lg:prose-xl max-w-none">
        {{ project.description|linebreaks }}
    </div>
    
    <!-- لینک به پروژه و بازگشت -->
    <div class="flex items-center space-x-4 space-x-reverse border-t pt-6">
        <a href="{{ project.project_url }}" target="_blank" class="inline-block bg-indigo-600 text-white font-semibold py-2 px-5 rounded-lg hover:bg-indigo-700 transition duration-300">
            مشاهده آنلاین پروژه
        </a>
        <a href="{% url 'projects' %}" class="inline-block bg-gray-200 text-gray-800 font-semibold py-2 px-5 rounded-lg hover:bg-gray-300 transition duration-300">
            بازگشت به لیست پروژه‌ها
        </a>
    </div>
</div>
{% endblock %}