{% extends "base.html" %}

{% block page_title %}{% if product_title %}{{ product_title }}{% else %}Product{% endif %}{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugins/catalog/assets/css/catalog-product-detail.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}

{% block content %}
<div id="product-detail-root" class="product-detail-container"
     data-product-id="{{ product_id }}"
     data-currency="{{ currency_symbol | default(value='₹') }}">
    
    <div class="product-detail-loading" role="status" aria-label="Loading product">
        <i class="fas fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
    </div>

    <div id="product-detail-content" hidden>
        <div class="container">
            <div class="product-breadcrumb">
                 <a href="/plugins/catalog/all-products">Products</a> / <span id="breadcrumb-product-title">{% if product_title %}{{ product_title }}{% endif %}</span>
            </div>
            
            <div class="product-main-grid">
                <div class="product-images-section">
                    <div class="main-image-wrapper">
                        <img id="main-product-image" src="" alt="{% if product_title %}{{ product_title }}{% else %}Product{% endif %}">
                        <div id="product-dietary-indicator"></div>
                    </div>
                    <div id="product-thumbnails" class="thumbnail-grid">
                        <!-- Thumbnails will be injected here -->
                    </div>
                </div>
                
                <div class="product-info-section">
                    <h1 id="product-title" class="product-title">{% if product_title %}{{ product_title }}{% endif %}</h1>
                    
                    <div class="product-price-section">
                        <span id="product-price-original" class="price-striked" hidden></span>
                        <span id="product-price-highlighted" class="price-main"></span>
                        <span id="product-discount-badge" class="discount-badge" hidden></span>
                    </div>
                    
                    <div class="product-availability-status" id="product-status"></div>
                    
                    <div class="product-description product-description-html" id="product-description">{% if product_description %}{{ product_description | safe}}{% endif %}</div>
                    
                    <div class="product-actions">
                        <!-- Cart controls will be injected here if checkout is active -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/catalog/assets/js/catalog-components.js"></script>
<script src="/plugins/catalog/assets/js/product-detail.js" defer></script>
{% endblock %}