{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <a href="{% url 'projects_list' %}" class="btn btn-light mb-4">
                <i class="fas fa-arrow-left me-1"></i> Back to Projects
            </a>

            <!-- Cover Image -->
            {% if project.cover_image %}
            <img src="{{ project.cover_image.url }}" class="img-fluid rounded mb-4" alt="{{ project.title }}" style="width: 100%; max-height: 400px; object-fit: cover; border-radius: 12px;">
            {% endif %}

            <span class="badge bg-primary mb-2">{{ project.category.name|default:"Project" }}</span>
            <h1 class="fw-bold" style="color: #0e2e63;">{{ project.title }}</h1>
            
            <div class="d-flex flex-wrap gap-3 text-muted small mb-4">
                <span><i class="fas fa-user me-1"></i> Client: {{ project.client_name }}</span>
                <span><i class="fas fa-calendar me-1"></i> {{ project.project_date|date:"F d, Y" }}</span>
                {% if project.project_url %}
                <span><a href="{{ project.project_url }}" target="_blank" class="text-decoration-none">Live Project <i class="fas fa-external-link-alt ms-1"></i></a></span>
                {% endif %}
                {% if project.github_url %}
                <span><a href="{{ project.github_url }}" target="_blank" class="text-decoration-none">GitHub <i class="fab fa-github ms-1"></i></a></span>
                {% endif %}
            </div>

            <!-- Content -->
            <div class="card shadow-sm border-0" style="border-radius: 12px;">
                <div class="card-body">
                    <h5>Description</h5>
                    <p>{{ project.description|linebreaks }}</p>

                    {% if project.challenge %}
                    <h5 class="mt-4">Challenge</h5>
                    <p>{{ project.challenge|linebreaks }}</p>
                    {% endif %}

                    {% if project.solution %}
                    <h5 class="mt-4">Solution</h5>
                    <p>{{ project.solution|linebreaks }}</p>
                    {% endif %}

                    {% if project.results %}
                    <h5 class="mt-4">Results</h5>
                    <p>{{ project.results|linebreaks }}</p>
                    {% endif %}

                    {% if project.technologies %}
                    <div class="mt-4">
                        <strong>Technologies:</strong>
                        {% for tech in project.technologies.split|slice:":10" %}
                        <span class="badge bg-light text-dark me-1">{{ tech }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Gallery -->
            {% if project.image1 or project.image2 or project.image3 %}
            <div class="mt-4">
                <h4 class="fw-bold" style="color: #0e2e63;">Project Gallery</h4>
                <div class="row g-3 mt-2">
                    {% if project.image1 %}
                    <div class="col-md-4">
                        <img src="{{ project.image1.url }}" class="img-fluid rounded" style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                    </div>
                    {% endif %}
                    {% if project.image2 %}
                    <div class="col-md-4">
                        <img src="{{ project.image2.url }}" class="img-fluid rounded" style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                    </div>
                    {% endif %}
                    {% if project.image3 %}
                    <div class="col-md-4">
                        <img src="{{ project.image3.url }}" class="img-fluid rounded" style="height: 200px; width: 100%; object-fit: cover; border-radius: 8px;">
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Testimonials -->
            {% if testimonials %}
            <div class="mt-5">
                <h4 class="fw-bold" style="color: #0e2e63;">Client Testimonials</h4>
                <div class="row g-3 mt-2">
                    {% for testimonial in testimonials %}
                    <div class="col-md-6">
                        <div class="card shadow-sm border-0" style="border-radius: 12px;">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    {% if testimonial.client_image %}
                                    <img src="{{ testimonial.client_image.url }}" alt="{{ testimonial.client_name }}" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px;">
                                    {% else %}
                                    <div style="width: 50px; height: 50px; border-radius: 50%; background: #0e2e63; color: #fff; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                        {{ testimonial.client_name|first }}
                                    </div>
                                    {% endif %}
                                    <div>
                                        <h6 class="fw-bold mb-0">{{ testimonial.client_name }}</h6>
                                        <small class="text-muted">{{ testimonial.client_designation }}{% if testimonial.client_company %} at {{ testimonial.client_company }}{% endif %}</small>
                                        <br>
                                        <span class="text-warning">
                                            {% for i in "12345" %}
                                                {% if forloop.counter <= testimonial.rating %}★{% else %}☆{% endif %}
                                            {% endfor %}
                                        </span>
                                    </div>
                                </div>
                                <p class="mb-0">{{ testimonial.content }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}