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

{% block title %}{{ product.name }} - GiftShop Polska{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item"><a href="{% url 'catalog' %}">Shop</a></li>
                <li class="breadcrumb-item"><a href="{% url 'catalog' %}?category={{ product.category.slug }}">{{ product.category.name }}</a></li>
                <li class="breadcrumb-item active">{{ product.name }}</li>
            </ol>
        </nav>

        <div class="row g-5">
            <div class="col-lg-6">
                <img src="{{ product.image_url|default:'https://via.placeholder.com/600x600?text=Gift+Product' }}" alt="{{ product.name }}" class="img-fluid rounded-4 shadow-sm">
            </div>
            <div class="col-lg-6">
                <div class="ps-lg-4">
                    <span class="badge bg-light text-primary mb-3">{{ product.category.name }}</span>
                    <h1 class="display-5 mb-3">{{ product.name }}</h1>
                    <p class="h3 text-primary mb-4">{{ product.price }} PLN</p>
                    
                    <div class="mb-4">
                        <h5 class="mb-3">Description</h5>
                        <p class="text-muted lead">{{ product.description }}</p>
                    </div>

                    <div class="d-flex align-items-center gap-3 mb-5">
                        <div class="input-group" style="width: 130px;">
                            <button class="btn btn-outline-secondary" type="button">-</button>
                            <input type="text" class="form-control text-center" value="1">
                            <button class="btn btn-outline-secondary" type="button">+</button>
                        </div>
                        <button class="btn btn-primary btn-lg px-5 flex-grow-1">Add to Box</button>
                    </div>

                    <div class="p-4 bg-white rounded-4 border-0 shadow-sm">
                        <div class="d-flex align-items-center mb-3">
                            <span class="fs-4 me-3">🚚</span>
                            <div>
                                <h6 class="mb-0">Delivery to Poland</h6>
                                <p class="text-muted small mb-0">Ships within 1-2 business days</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="fs-4 me-3">🎁</span>
                            <div>
                                <h6 class="mb-0">Gift Wrap Included</h6>
                                <p class="text-muted small mb-0">Every item is packed with care</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
