{% extends 'web/base_modern.html' %}
{% load static %}

{% block title %}{{ item.title }} - Портфолио - SmartSolTech{% endblock %}

{% block extra_head %}
<!-- Lightbox CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
<style>
.hover-zoom {
    transition: transform 0.3s ease;
}
.hover-zoom:hover {
    transform: scale(1.05);
}
</style>
{% endblock %}

{% block content %}
<section class="section-padding">
    <div class="container" style="max-width: 1000px;">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Главная</a></li>
                <li class="breadcrumb-item"><a href="{% url 'portfolio_list' %}">Портфолио</a></li>
                <li class="breadcrumb-item active">{{ item.title }}</li>
            </ol>
        </nav>

        <!-- Project Header -->
        <div class="text-center mb-5">
            {% if item.category %}
            <span class="badge bg-primary mb-3">{{ item.category.name }}</span>
            {% endif %}
            <h1 class="display-5 fw-bold mb-3">{{ item.title }}</h1>
            {% if item.client_name %}
            <p class="text-muted">
                <i class="fas fa-user"></i> Клиент: {{ item.client_name }}
            </p>
            {% endif %}
            {% if item.completion_date %}
            <p class="text-muted">
                <i class="far fa-calendar"></i> Дата завершения: {{ item.completion_date|date:"d.m.Y" }}
            </p>
            {% endif %}
        </div>

        <!-- Project Image -->
        {% if item.image %}
        <div class="mb-5">
            <img src="{{ item.image.url }}" class="img-fluid rounded" alt="{{ item.title }}" style="width: 100%; max-height: 600px; object-fit: cover;">
        </div>
        {% endif %}

        <!-- Project Gallery -->
        {% if item.gallery_images.all %}
        <div class="mb-5">
            <h3 class="mb-4">Галерея проекта</h3>
            <div class="row g-3">
                {% for gallery_image in item.gallery_images.all %}
                <div class="col-md-4 col-sm-6">
                    <a href="{{ gallery_image.image.url }}" data-lightbox="portfolio-gallery" {% if gallery_image.caption %}data-title="{{ gallery_image.caption }}"{% endif %}>
                        <img src="{{ gallery_image.image.url }}" class="img-fluid rounded shadow-sm hover-zoom" alt="{{ gallery_image.caption }}" style="width: 100%; height: 250px; object-fit: cover; cursor: pointer; transition: transform 0.3s;">
                    </a>
                    {% if gallery_image.caption %}
                    <p class="text-muted small mt-2 text-center">{{ gallery_image.caption }}</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Project Description -->
        <div class="card-modern mb-5">
            <div class="card-body">
                <h3 class="mb-4">О проекте</h3>
                <div class="project-description">
                    {{ item.description|linebreaks }}
                </div>
            </div>
        </div>

        <!-- Back to Portfolio -->
        <div class="text-center mt-5">
            <a href="{% url 'portfolio_list' %}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i> Все проекты
            </a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<!-- Lightbox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
<script>
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true,
        'albumLabel': 'Изображение %1 из %2'
    });
</script>
{% endblock %}