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

<!DOCTYPE html>
<html lang="{{ current_lang|default('el') }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{% block title %}{{ site_title|default('Hockey CMS') }}{% endblock %}</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        :root {
            /* --- DARK THEME PALETTE --- */
            --primary: #f97316; /* Δυναμικό Πορτοκαλί */
            --primary-hover: #ea580c;
            --bg-color: #0b1120; /* Βαθύ σκοτεινό Slate */
            --panel-bg: #1e293b; /* Χρώμα για κάρτες και header */
            --border-color: #334155;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --accent-green: #10b981;
            --accent-blue: #3b82f6;
            --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.3);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
            --border-radius: 8px; /* Λιγότερο στρογγυλεμένες γωνίες για σπορ ύφος */
        }

        body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); margin: 0; color: var(--text-main); line-height: 1.5; }
        
        /* --- HEADER --- */
        header { background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(10px); padding: 15px 0; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
        .header-inner { max-width: 1400px; margin: 0 auto; padding: 0 30px; display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 24px; font-weight: 900; color: var(--text-main); text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -0.5px; text-transform: uppercase; }
        .logo span { color: var(--primary); }
        
        .header-actions { display: flex; align-items: center; gap: 25px; }
        .search-form { display: flex; background: #0f172a; border-radius: 30px; padding: 4px; border: 1px solid var(--border-color); flex-grow: 1; transition: border-color 0.3s; }
        .search-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2); }
        .search-form input { padding: 8px 15px; border: none; background: transparent; outline: none; width: 280px; font-family: 'Inter', sans-serif; color: var(--text-main); }
        .search-form input::placeholder { color: var(--text-muted); }
        .search-form button { padding: 8px 25px; border: none; background: var(--primary); color: white; border-radius: 30px; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; }
        .search-form button:hover { background: var(--primary-hover); }
        
        /* --- LANGUAGE SWITCHER --- */
        .lang-switch { font-size: 13px; font-weight: 700; display: flex; gap: 5px; align-items: center; background: #0f172a; padding: 4px; border-radius: 20px; border: 1px solid var(--border-color); }
        .lang-switch a { color: var(--text-muted); text-decoration: none; padding: 4px 10px; border-radius: 15px; transition: 0.2s; }
        .lang-switch a:hover { color: var(--text-main); }
        .lang-switch a.active { color: #fff; background: var(--border-color); }

        /* --- USER MENU --- */
        .user-menu { display: flex; gap: 12px; align-items: center; margin-left: 10px; }
        .cart-link { background: transparent; border: 2px solid var(--primary); color: var(--primary); padding: 8px 20px; border-radius: 30px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: 0.2s; text-transform: uppercase; font-size: 14px; }
        .cart-link:hover { background: var(--primary); color: white; }
        
        .btn-seller { background: var(--accent-blue); color: white; padding: 10px 18px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; }
        .btn-seller:hover { background: #2563eb; box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
        
        .btn-profile { background: #334155; color: var(--text-main); padding: 10px 18px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.2s; }
        .btn-profile:hover { background: #475569; }
        
        .btn-logout-icon { color: #fca5a5; font-size: 16px; font-weight: bold; text-decoration: none; padding: 5px 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); transition: all 0.2s; }
        .btn-logout-icon:hover { background: #ef4444; color: white; }

        /* --- GUEST LOGIN/REGISTER BUTTONS --- */
        .btn-login {
            background: transparent;
            color: var(--text-main);
            border: 1px solid var(--border-color);
            padding: 8px 18px;
            border-radius: 30px;
            font-weight: 700;
            text-decoration: none;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: 0.2s;
        }
        .btn-login:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: var(--text-muted);
        }
        
        .btn-register {
            background: var(--primary);
            color: white;
            padding: 8px 18px;
            border-radius: 30px;
            font-weight: 700;
            text-decoration: none;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: 0.2s;
            border: 1px solid var(--primary);
        }
        .btn-register:hover {
            background: var(--primary-hover);
            border-color: var(--primary-hover);
        }

        /* --- LAYOUT --- */
        .main-container { max-width: 1400px; margin: 40px auto; padding: 0 30px; display: flex; gap: 40px; align-items: flex-start; }
        .content-area { flex-grow: 1; min-width: 0; }
        
        /* --- MOBILE TOGGLE BUTTON --- */
        .mobile-menu-toggle { display: none; width: 100%; padding: 14px; background: var(--panel-bg); border: 1px solid var(--border-color); color: var(--text-main); border-radius: var(--border-radius); font-weight: 700; cursor: pointer; margin-bottom: 20px; font-size: 15px; text-align: center; text-transform: uppercase; letter-spacing: 1px; }

        /* --- SIDEBAR --- */
        .sidebar { width: 280px; flex-shrink: 0; background: var(--panel-bg); padding: 25px 0; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); }
        .sidebar h3 { margin: 0 0 20px 25px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; color: var(--primary); }
        .tree-menu { list-style: none; padding: 0; margin: 0; }
        .menu-item { position: relative; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .menu-item:last-child { border-bottom: none; }
        .parent-cat { text-decoration: none; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; padding: 14px 25px; font-weight: 600; font-size: 15px; border-left: 3px solid transparent; transition: 0.2s; }
        .parent-cat:hover { background-color: rgba(255,255,255,0.03); color: var(--primary); border-left: 3px solid var(--primary); }
        .has-children::after { content: '›'; font-size: 18px; color: var(--text-muted); }
        
        /* Submenu (Desktop) */
        .tree-submenu { list-style: none; padding: 0; margin: 0; position: absolute; left: 100%; top: -1px; width: 240px; background: var(--panel-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); opacity: 0; visibility: hidden; transform: translateX(10px); transition: all 0.2s; z-index: 50; }
        .menu-item:hover .tree-submenu { opacity: 1; visibility: visible; transform: translateX(0); }
        .tree-submenu li a { text-decoration: none; color: var(--text-muted); display: block; padding: 12px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.03); transition: 0.2s; }
        .tree-submenu li a:hover { color: var(--primary); background-color: rgba(255,255,255,0.02); padding-left: 25px; }

        /* --- FOOTER --- */
        footer { background: var(--panel-bg); color: var(--text-muted); text-align: center; padding: 40px 30px; margin-top: 80px; border-top: 1px solid var(--border-color); font-size: 14px; font-weight: 500; }

        @media (max-width: 992px) {
            .main-container { flex-direction: column; }
            .sidebar { width: 100%; display: none; margin-bottom: 30px; }
            .sidebar.active { display: block; }
            .mobile-menu-toggle { display: block; }
            
            .menu-item:hover .tree-submenu { display: none; }
            .tree-submenu { position: relative; left: 0; top: 0; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-top: 1px solid var(--border-color); border-radius: 0; display: block; background: rgba(0,0,0,0.2); }
            .tree-submenu li a { padding: 12px 15px 12px 35px; }
            .has-children::after { content: '▼'; font-size: 12px; }
        }

        @media (max-width: 768px) {
            .header-inner { flex-direction: column; padding: 15px; gap: 20px; }
            .header-actions { flex-direction: column; width: 100%; gap: 15px; }
            .search-form { width: 100%; }
            .search-form input { width: 100%; }
            
            .user-menu { flex-wrap: wrap; justify-content: center; width: 100%; margin-left: 0; gap: 10px; }
            .cart-link, .btn-seller, .btn-profile { flex: 1; justify-content: center; text-align: center; font-size: 12px; padding: 10px; }
            .btn-login, .btn-register { flex: 1; text-align: center; }
        }

        {% block extra_css %}{% endblock %}
    </style>
</head>
<body>

    <header>
        <div class="header-inner">
            <a href="index.php" class="logo">
                {% if site_logo %}
                    <img src="{{ site_logo }}" alt="Logo" style="max-height: 65px; width: auto; max-width: 250px; object-fit: contain; display: block;">
                {% else %}
                    🏒 <span>{{ text.header_logo_text|default('TradeHockey') }}</span>
                {% endif %}
            </a>
            
            <div class="header-actions">
                
                <div class="lang-switch">
                    <a href="javascript:void(0);" onclick="changeShopLanguage('el');" class="{% if current_lang == 'el' %}active{% endif %}">GR</a>
                    <a href="javascript:void(0);" onclick="changeShopLanguage('en');" class="{% if current_lang == 'en' %}active{% endif %}">EN</a>
                </div>

                <script>
                    function changeShopLanguage(lang) {
                        var url = new URL(window.location.href);
                        url.searchParams.set('lang', lang);
                        window.location.href = url.toString();
                    }
                </script>

                <form action="index.php" method="GET" class="search-form">
                    <input type="text" name="q" placeholder="{{ text.header_search_placeholder|default('Αναζήτηση εξοπλισμού...') }}" value="{{ search_query|default('') }}" required>
                    <button type="submit">{{ text.header_search_btn|default('Αναζήτηση') }}</button>
                </form>
                
                <div class="user-menu">
                    {% if session.user_id %}
                        <a href="cart.php" class="cart-link">🛒 {{ text.header_cart_btn|default('Καλάθι') }}</a>
                        
                        {% if session.role_id == 2 or session.is_seller == 1 %}
                            <a href="seller_dashboard.php" class="btn-seller">
                                🏪 {% if current_lang == 'en' %}Seller Panel{% else %}Πωλητής{% endif %}
                            </a>
                        {% endif %}
                        
                        <a href="profile.php" title="Το Προφίλ μου" class="btn-profile">👤 {{ session.username }}</a>
                        <a href="logout.php" title="Αποσύνδεση" class="btn-logout-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                <polyline points="16 17 21 12 16 7"></polyline>
                                <line x1="21" y1="12" x2="9" y2="12"></line>
                            </svg>
                        </a>
                    {% else %}
                        {% if current_lang == 'en' %}
                            <a href="login.php" class="btn-login">{{ text.header_login_btn|default('Login') }}</a>
                            <a href="register.php" class="btn-register">{{ text.header_register_btn|default('Register') }}</a>
                        {% else %}
                            <a href="login.php" class="btn-login">{{ text.header_login_btn|default('Σύνδεση') }}</a>
                            <a href="register.php" class="btn-register">{{ text.header_register_btn|default('Εγγραφή') }}</a>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </header>

    <div class="main-container">
        <button id="mobileMenuBtn" class="mobile-menu-toggle">☰ {% if current_lang == "en" %}Show Categories{% else %}Εμφάνιση Κατηγοριών{% endif %}</button>

        <aside class="sidebar" id="sidebarMenu">
            <h3>{{ text.sidebar_categories_title|default('ΚΑΤΗΓΟΡΙΕΣ') }}</h3>
            <ul class="tree-menu">
                
                <!-- ΚΟΥΜΠΙ "ΑΡΧΙΚΗ ΣΕΛΙΔΑ" -->
                <li class="menu-item" style="border-bottom: 2px solid rgba(255,255,255,0.05);">
                    <a href="index.php" class="parent-cat" style="color: var(--text-main); font-weight: 700;">
                        <span style="display:flex; align-items:center; gap:8px;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9 22 9 12 15 12 15 22"></polyline>
                            </svg>
                            {% if current_lang == 'en' %}Home{% else %}Αρχική Σελίδα{% endif %}
                        </span>
                    </a>
                </li>
                
                {% for cat in categories %}
                    {% if cat.parent_id is empty %}
                        {% set has_children = false %}
                        {% for subcat in categories %}
                            {% if subcat.parent_id == cat.id %}
                                {% set has_children = true %}
                            {% endif %}
                        {% endfor %}

                        <li class="menu-item">
                            <a href="index.php?category_id={{ cat.id }}" class="parent-cat {% if has_children %}has-children{% endif %}">
                                {{ cat.display_name }}
                            </a>
                            
                            {% if has_children %}
                                <ul class="tree-submenu">
                                    {% for subcat in categories %}
                                        {% if subcat.parent_id == cat.id %}
                                            <li><a href="index.php?category_id={{ subcat.id }}">{{ subcat.display_name }}</a></li>
                                        {% endif %}
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </aside>

        <main class="content-area">
            {% block content %}{% endblock %}
        </main>
    </div>

    <footer>
        <p>&copy; {{ "now"|date("Y") }} <strong>{{ site_title|default('Hockey CMS') }}</strong>. All rights reserved.</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuBtn = document.getElementById('mobileMenuBtn');
            const sidebar = document.getElementById('sidebarMenu');
            
            if(menuBtn && sidebar) {
                menuBtn.addEventListener('click', function() {
                    sidebar.classList.toggle('active');
                    if(sidebar.classList.contains('active')) {
                        menuBtn.innerHTML = '✕ {% if current_lang == "en" %}Hide Categories{% else %}Απόκρυψη Κατηγοριών{% endif %}';
                    } else {
                        menuBtn.innerHTML = '☰ {% if current_lang == "en" %}Show Categories{% else %}Εμφάνιση Κατηγοριών{% endif %}';
                    }
                });
            }
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>