HockeyCMS-SHOP/themes/default/product.html.twig

{% extends "base.html.twig" %}

{% block title %}{{ product.title }} - {{ site_title }}{% endblock %}

{% block extra_css %}
<style>
    /* --- PRODUCT PAGE (DARK THEME) --- */
    .back-link { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-weight: 600; font-size: 14px; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px; }
    .back-link:hover { color: var(--primary); transform: translateX(-5px); }

    .product-container { display: flex; flex-wrap: wrap; gap: 40px; background: var(--panel-bg); padding: 35px; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); margin-top: 10px; }
    
    .product-image-wrap { flex: 1; min-width: 320px; }
    .product-image-wrap img { width: 100%; border-radius: 8px; border: 1px solid var(--border-color); object-fit: cover; box-shadow: var(--shadow-sm); }
    .no-image-box { width: 100%; height: 400px; background: #0f172a; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border: 1px dashed var(--border-color); }
    
    .product-details { flex: 1.5; min-width: 320px; display: flex; flex-direction: column; }
    .product-details h1 { margin-top: 0; color: var(--text-main); font-size: 2.2em; font-weight: 900; line-height: 1.2; letter-spacing: -0.5px; }
    
    .product-meta { color: var(--text-muted); margin-bottom: 25px; font-size: 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; flex-wrap: wrap; gap: 15px; }
    .product-meta span { display: flex; align-items: center; gap: 5px; }
    .product-meta strong { color: var(--text-main); font-weight: 700; }
    
    .product-price { font-size: 3em; color: var(--accent-green); font-weight: 900; margin: 10px 0 25px; text-shadow: 0 2px 10px rgba(16, 185, 129, 0.2); }
    
    /* ADD TO CART FORM */
    .add-to-cart-form { background: rgba(0,0,0,0.15); padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); margin-bottom: 30px; }
    .quantity-wrap { display: flex; gap: 15px; align-items: center; margin-bottom: 20px; }
    .quantity-wrap label { font-weight: 700; color: var(--text-muted); text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px; }
    .quantity-input { width: 80px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; background: #0f172a; color: var(--text-main); font-size: 16px; font-weight: bold; text-align: center; outline: none; transition: 0.2s; }
    .quantity-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2); }
    
    .buy-btn { display: block; width: 100%; text-align: center; background: var(--primary); color: white; padding: 16px; border-radius: 6px; border: none; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; box-sizing: border-box; }
    .buy-btn:hover { background: var(--primary-hover); box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); transform: translateY(-2px); }
    
    /* ATTRIBUTES TABLE */
    .attributes-table { width: 100%; border-collapse: collapse; margin-top: 20px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); }
    .attributes-table th, .attributes-table td { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.03); text-align: left; }
    .attributes-table tr:last-child th, .attributes-table tr:last-child td { border-bottom: none; }
    .attributes-table th { width: 35%; background: rgba(0,0,0,0.3); color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
    .attributes-table td { background: rgba(0,0,0,0.1); color: var(--text-main); font-size: 15px; }
    
    /* DESCRIPTION */
    .description-box { margin-top: 35px; white-space: pre-wrap; line-height: 1.7; color: #cbd5e1; background: rgba(0,0,0,0.2); padding: 25px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 15px; }
    .description-box h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }

    @media (max-width: 768px) {
        .product-container { padding: 20px; gap: 25px; }
        .product-details h1 { font-size: 1.8em; }
        .product-price { font-size: 2.2em; }
        .attributes-table th { width: 45%; font-size: 12px; padding: 12px; }
        .attributes-table td { padding: 12px; font-size: 14px; }
    }
</style>
{% endblock %}

{% block content %}
    <a href="index.php" class="back-link">
        &larr; {% if current_lang == 'en' %}Back to catalog{% else %}Πίσω στον κατάλογο{% endif %}
    </a>

    <div class="product-container">
        <!-- Φωτογραφία -->
        <div class="product-image-wrap">
            {% if product.image_path %}
                <img src="{{ product.image_path }}" alt="{{ product.title }}">
            {% else %}
                <div class="no-image-box">
                    {% if current_lang == 'en' %}No Image{% else %}Χωρίς Φωτογραφία{% endif %}
                </div>
            {% endif %}
        </div>
        
        <!-- Λεπτομέρειες -->
        <div class="product-details">
            <h1 style="margin-bottom: 10px;">{{ product.title }}</h1>
            
            {% if product.sku %}
                <div style="font-size: 14px; color: var(--text-muted); margin-bottom: 20px; display: flex; align-items: center; gap: 8px;">
                    <span style="background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); padding: 4px 10px; border-radius: 6px;">
                        SKU: <strong style="color: var(--text-main); letter-spacing: 0.5px;">{{ product.sku }}</strong>
                    </span>
                </div>
            {% endif %}
            
            <div class="product-meta">
                <span>{% if current_lang == 'en' %}Category:{% else %}Κατηγορία:{% endif %} <strong>{{ product.cat_name }}</strong></span>
                <span style="color: var(--border-color);">|</span> 
                <span>{% if current_lang == 'en' %}Seller:{% else %}Πωλητής:{% endif %} <strong>{{ product.seller_name }}</strong></span>
                <span style="color: var(--border-color);">|</span>
                <span>{% if current_lang == 'en' %}Listed:{% else %}Αναρτήθηκε:{% endif %} <strong>{{ product.created_at|date("d/m/Y") }}</strong></span>
            </div>
            
            <div class="product-price">{{ product.price|number_format(2, ',', '.') }} €</div>
            
            <form action="cart.php?action=add" method="POST" class="add-to-cart-form">
                <input type="hidden" name="product_id" value="{{ product.id }}">
                <div class="quantity-wrap">
                    <label for="quantity">{% if current_lang == 'en' %}Quantity:{% else %}Ποσότητα:{% endif %}</label>
                    <input type="number" id="quantity" name="quantity" class="quantity-input" value="1" min="1" max="{{ product.quantity }}">
                </div>
                <button type="submit" class="buy-btn">
                    {% if current_lang == 'en' %}Add to Cart{% else %}Προσθήκη στο Καλάθι{% endif %}
                </button>
            </form>
            
            <!-- Δυναμικά Χαρακτηριστικά -->
            {% if attributes|length > 0 %}
                <table class="attributes-table">
                    <tbody>
                        {% for attr in attributes %}
                            <tr>
                                <th>{{ attr.name }}</th>
                                <td><strong>{{ attr.value }}</strong> {{ attr.unit }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
            
            <!-- Περιγραφή -->
            {% if product.description %}
                <div class="description-box">
                    <h3>{% if current_lang == 'en' %}Equipment Description{% else %}Περιγραφή Εξοπλισμού{% endif %}</h3>
                    {{ product.description }}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}