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

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

{% block title %}
    {% if current_category_name %}
        {{ current_category_name }} - {{ site_title }}
    {% else %}
        {% if current_lang == 'en' %}Home{% else %}Αρχική{% endif %} - {{ site_title }}
    {% endif %}
{% endblock %}

{% block extra_css %}
<style>
    /* --- HERO SECTION --- */
    .hero { 
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 
        padding: 60px 30px; 
        text-align: center; 
        border-radius: var(--border-radius); 
        margin-bottom: 40px; 
        border: 1px solid var(--border-color); 
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        position: relative;
        overflow: hidden;
    }
    .hero::before {
        content: ''; position: absolute; top: -50px; left: -50px; width: 150px; height: 150px; background: rgba(249, 115, 22, 0.15); border-radius: 50%; filter: blur(60px); pointer-events: none;
    }
    
    .hero h1 { margin-top: 0; font-size: 2.8em; color: var(--text-main); font-weight: 900; letter-spacing: -1px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
    .hero p { color: var(--text-muted); font-size: 1.2em; font-weight: 500; }
    
    /* --- TOP FILTER BAR --- */
    .top-filters-bar {
        background: var(--panel-bg);
        padding: 20px 25px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        margin-bottom: 35px;
        border: 1px solid var(--border-color);
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
        justify-content: space-between;
    }
    
    .filter-group { display: flex; align-items: center; gap: 10px; }
    .filter-group label { font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
    
    .filter-control {
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        background: #0f172a;
        outline: none;
        color: var(--text-main);
        transition: 0.2s;
    }
    .filter-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2); }
    
    .price-inputs { display: flex; align-items: center; gap: 8px; }
    .price-inputs input { width: 80px; }
    .price-inputs span { color: var(--text-muted); font-weight: bold; }
    
    .btn-apply-filters {
        padding: 10px 20px;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: 800;
        cursor: pointer;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: 0.2s;
    }
    .btn-apply-filters:hover { background: var(--primary-hover); transform: translateY(-1px); }
    
    .btn-clear-filters {
        color: #fca5a5;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        transition: 0.2s;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .btn-clear-filters:hover { color: #ef4444; }

    /* --- PRODUCTS GRID --- */
    .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }
    
    .product-card { 
        background: var(--panel-bg); 
        border-radius: var(--border-radius); 
        overflow: hidden; 
        box-shadow: var(--shadow-sm); 
        border: 1px solid var(--border-color);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        display: flex; 
        flex-direction: column; 
    }
    .product-card:hover { 
        transform: translateY(-8px); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.4); 
        border-color: rgba(249, 115, 22, 0.5);
    }
    
    .product-image-container { position: relative; width: 100%; height: 220px; background: #0f172a; overflow: hidden;}
    .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
    .product-card:hover .product-image { transform: scale(1.05); }
    .no-img-text { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
    
    .product-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
    .product-title { margin: 0 0 12px; font-size: 1.15em; color: var(--text-main); font-weight: 700; line-height: 1.3; }
    .product-price { font-size: 1.3em; font-weight: 900; color: var(--accent-green); margin-bottom: 15px; }
    
    .product-attributes { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; flex-grow: 1; display: flex; flex-wrap: wrap; gap: 6px; }
    .attr-badge { background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1; font-weight: 500; }
    .attr-badge strong { color: var(--text-main); }

    .btn-view { display: block; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: var(--accent-blue); text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 800; text-align: center; margin-top: auto; text-transform: uppercase; letter-spacing: 1px; border: 1px solid rgba(59, 130, 246, 0.2); transition: 0.2s; }
    .btn-view:hover { background: var(--accent-blue); color: white; }

    .section-title { border-bottom: 2px solid var(--primary); padding-bottom: 10px; display: inline-block; margin-top: 0; color: var(--text-main); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }

    /* --- PAGINATION STYLES --- */
    .pagination-container { display: flex; justify-content: center; gap: 8px; margin-top: 50px; margin-bottom: 20px; flex-wrap: wrap; }
    .page-btn { padding: 10px 16px; background: var(--panel-bg); border: 1px solid var(--border-color); color: var(--text-main); border-radius: 6px; text-decoration: none; font-weight: 700; transition: 0.2s; font-size: 14px; }
    .page-btn:hover { background: rgba(255,255,255,0.05); border-color: var(--text-muted); }
    .page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
    .page-dots { padding: 10px; color: var(--text-muted); font-weight: bold; pointer-events: none; }

    @media (max-width: 768px) {
        .hero h1 { font-size: 2em; }
        .top-filters-bar { flex-direction: column; align-items: stretch; padding: 15px; }
        .filter-group { flex-direction: column; align-items: stretch; gap: 8px; }
        .price-inputs { width: 100%; }
        .price-inputs input { width: 100%; }
    }
</style>
{% endblock %}

{% block content %}
    {% if search_query is defined and search_query != '' %}
        <div style="background: rgba(59, 130, 246, 0.1); padding: 20px; border-radius: var(--border-radius); border: 1px solid rgba(59, 130, 246, 0.2); margin-bottom: 30px;">
            <h3 style="margin-top:0; color: var(--accent-blue);">
                {% if current_lang == 'en' %}Search results for:{% else %}Αποτελέσματα αναζήτησης για:{% endif %} "<strong>{{ search_query }}</strong>"
            </h3>
            <p style="margin-bottom:0; color: var(--text-main); font-weight:500;">
                {% if current_lang == 'en' %}Found {{ total_products }} products.{% else %}Βρέθηκαν {{ total_products }} προϊόντα.{% endif %}
            </p>
        </div>
    {% endif %}
    
    {% if current_category_name %}
        <h2 class="section-title">
            {{ text.category_title_prefix|default('Κατηγορία:') }} {{ current_category_name }}
        </h2>
        <p style="color: var(--text-muted); margin-bottom: 25px; font-size: 15px;">{{ text.category_subtitle_prefix|default('Εμφάνιση εξοπλισμού για') }} <strong>{{ current_category_name }}</strong></p>
        
        <!-- ΟΡΙΖΟΝΤΙΑ ΜΠΑΡΑ ΦΙΛΤΡΩΝ -->
        <form action="index.php" method="GET" class="top-filters-bar" id="topFilterForm">
            
            {% if category_id %}
                <input type="hidden" name="category_id" value="{{ category_id }}">
            {% endif %}
            {% if search_query %}
                <input type="hidden" name="q" value="{{ search_query }}">
            {% endif %}

            <div style="display: flex; flex-wrap: wrap; gap: 20px; flex-grow: 1;">
                
                <div class="filter-group">
                    <label>{{ text.filter_sort_label|default('Ταξινόμηση:') }}</label>
                    <select name="sort" class="filter-control" onchange="document.getElementById('topFilterForm').submit();">
                        <option value="newest" {% if filters.sort == 'newest' %}selected{% endif %}>
                            {% if current_lang == 'en' %}Newest{% else %}Νεότερα{% endif %}
                        </option>
                        <option value="price_asc" {% if filters.sort == 'price_asc' %}selected{% endif %}>
                            {% if current_lang == 'en' %}Price: Low to High{% else %}Φθηνότερα{% endif %}
                        </option>
                        <option value="price_desc" {% if filters.sort == 'price_desc' %}selected{% endif %}>
                            {% if current_lang == 'en' %}Price: High to Low{% else %}Ακριβότερα{% endif %}
                        </option>
                    </select>
                </div>

                <div class="filter-group">
                    <label>{{ text.filter_price_label|default('Τιμή (€):') }}</label>
                    <div class="price-inputs">
                        <input type="number" name="min_price" class="filter-control" placeholder="{{ text.filter_price_from|default('Από') }}" value="{{ filters.min_price }}">
                        <span>-</span>
                        <input type="number" name="max_price" class="filter-control" placeholder="{{ text.filter_price_to|default('Έως') }}" value="{{ filters.max_price }}">
                    </div>
                </div>

                {% if category_attributes %}
                    {% for attr in category_attributes %}
                        {% set attr_values = attr.distinct_values|split('||') %}
                        
                        {% if attr_values|length > 0 and attr.distinct_values != '' %}
                        <div class="filter-group">
                            <label>{{ attr.display_name|default(attr.name_el) }}:</label>
                            <select name="attr[{{ attr.id }}]" class="filter-control" onchange="document.getElementById('topFilterForm').submit();">
                                <option value="">{% if current_lang == 'en' %}All{% else %}Όλα{% endif %}</option>
                                {% for val in attr_values %}
                                    <option value="{{ val }}" {% if filters.attr[attr.id] == val %}selected{% endif %}>{{ val }}{{ attr.unit ? ' ' ~ attr.unit : '' }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}

                <!-- ΝΕΟ ΦΙΛΤΡΟ: ΕΜΦΑΝΙΣΗ ΑΝΑ ΣΕΛΙΔΑ -->
                <div class="filter-group">
                    <label>{% if current_lang == 'en' %}Show:{% else %}Ανά σελίδα:{% endif %}</label>
                    <select name="limit" class="filter-control" onchange="document.getElementById('topFilterForm').submit();">
                        <option value="30" {% if limit == 30 %}selected{% endif %}>30</option>
                        <option value="50" {% if limit == 50 %}selected{% endif %}>50</option>
                        <option value="100" {% if limit == 100 %}selected{% endif %}>100</option>
                    </select>
                </div>

            </div>

            <div style="display: flex; align-items: center; gap: 20px;">
                <button type="submit" class="btn-apply-filters">
                    {% if current_lang == 'en' %}Apply{% else %}Εφαρμογή{% endif %}
                </button>
                
                {% if filters.sort or filters.min_price or filters.max_price or filters.attr %}
                    <a href="index.php?{% if category_id %}category_id={{ category_id }}{% endif %}{% if search_query %}&q={{ search_query }}{% endif %}" class="btn-clear-filters">
                        ✖ {% if current_lang == 'en' %}Clear Filters{% else %}Καθαρισμός{% endif %}
                    </a>
                {% endif %}
            </div>
            
        </form>

    {% elseif search_query is empty %}
        <div class="hero">
            <h1>{{ text.site_slogan|default('Βρες τον καλύτερο εξοπλισμό Χόκεϊ!') }}</h1>
            <p>{{ text.site_sub_slogan|default('Αγορά και πώληση καινούργιου & μεταχειρισμένου εξοπλισμού.') }}</p>
        </div>

        <h2 class="section-title">{{ text.title_new_arrivals|default('Νέες Αφίξεις') }}</h2>
    {% endif %}

    <div class="products-grid">
        {% for product in products %}
            <div class="product-card">
                <div class="product-image-container">
                    {% if product.image_path %}
                        <img src="{{ product.image_path }}" class="product-image" alt="{{ product.title }}">
                    {% else %}
                        <div class="no-img-text">No Image</div>
                    {% endif %}
                </div>
                
                <div class="product-info">
                    <h3 class="product-title">{{ product.title }}</h3>
                    
                    {% if product.sku %}
                        <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 8px; font-weight: 600;">
                            SKU: <span style="color: var(--text-main);">{{ product.sku }}</span>
                        </div>
                    {% endif %}

                    <div class="product-price">{{ product.price|number_format(2, ',', '.') }} €</div>
                    
                    <div class="product-attributes">
                        {% if product.attributes is not empty %}
                            {% for attr in product.attributes %}
                                <span class="attr-badge">
                                    <strong>{{ attr.name }}:</strong> {{ attr.value }}{{ attr.unit ? ' ' ~ attr.unit : '' }}
                                </span>
                            {% endfor %}
                        {% endif %}
                    </div>
                    
                    <a href="product.php?id={{ product.id }}" class="btn-view">{{ text.btn_view_product|default('Προβολή') }}</a>
                </div>
            </div>
        {% else %}
            <div style="grid-column: 1 / -1; background: var(--panel-bg); padding: 40px; text-align: center; border-radius: var(--border-radius); border: 1px dashed var(--border-color); color: var(--text-muted); font-size: 16px;">
                {% if current_lang == 'en' %}
                    No products found in this category.
                {% else %}
                    Δεν βρέθηκαν διαθέσιμα προϊόντα.
                {% endif %}
            </div>
        {% endfor %}
    </div>

    <!-- ΣΕΛΙΔΟΠΟΙΗΣΗ ΣΤΟ ΚΑΤΩ ΜΕΡΟΣ (PAGINATION) -->
    {% if total_pages > 1 %}
        <div class="pagination-container">
            {% if current_page > 1 %}
                <a href="{{ pagination_url }}{{ current_page - 1 }}" class="page-btn">
                    &laquo; {% if current_lang == 'en' %}Prev{% else %}Προηγ.{% endif %}
                </a>
            {% endif %}

            {# Έξυπνη εμφάνιση σελίδων (κρύβει τις ενδιάμεσες αν είναι πάνω από 5) #}
            {% set start_page = max(1, current_page - 2) %}
            {% set end_page = min(total_pages, current_page + 2) %}

            {% if start_page > 1 %}
                <a href="{{ pagination_url }}1" class="page-btn">1</a>
                {% if start_page > 2 %}<span class="page-dots">...</span>{% endif %}
            {% endif %}

            {% for p in start_page..end_page %}
                <a href="{{ pagination_url }}{{ p }}" class="page-btn {% if p == current_page %}active{% endif %}">{{ p }}</a>
            {% endfor %}

            {% if end_page < total_pages %}
                {% if end_page < total_pages - 1 %}<span class="page-dots">...</span>{% endif %}
                <a href="{{ pagination_url }}{{ total_pages }}" class="page-btn">{{ total_pages }}</a>
            {% endif %}

            {% if current_page < total_pages %}
                <a href="{{ pagination_url }}{{ current_page + 1 }}" class="page-btn">
                    {% if current_lang == 'en' %}Next{% else %}Επόμ.{% endif %} &raquo;
                </a>
            {% endif %}
        </div>
    {% endif %}

{% endblock %}