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

{% block title %}{{ t.title }} - Hockey CMS{% endblock %}

{% block content %}
<style>
    /* Κρύβουμε sidebar και κατηγορίες */
    aside, .categories-sidebar, .sidebar, [class*="category"] {
        display: none !important;
    }
    .main-content, .content, main {
        width: 100% !important;
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
    }
</style>

<div style="display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 40px 20px; width: 100%;">
    <div style="background: var(--panel-bg, #1e293b); padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid var(--border-color, #334155); width: 100%; max-width: 420px; box-sizing: border-box;">
        
        <h2 style="margin-top: 0; color: var(--primary, #f97316); text-align: center; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 0.5px;">
            {{ t.title }}
        </h2>

        {{ message | raw }}
        
        <form method="POST" action="register.php">
            <!-- Όνομα και Επίθετο το ένα κάτω από το άλλο -->
            <div style="margin-bottom: 15px;">
                <input type="text" name="reg_first_name" placeholder="{{ t.fname }}" required style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;">
            </div>
            
            <div style="margin-bottom: 15px;">
                <input type="text" name="reg_last_name" placeholder="{{ t.lname }}" required style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;">
            </div>
            
            <div style="margin-bottom: 15px;">
                <input type="text" name="reg_username" placeholder="{{ t.username }}" required style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;">
            </div>
            <div style="margin-bottom: 15px;">
                <input type="email" name="reg_email" placeholder="{{ t.email }}" required style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;">
            </div>
            <div style="margin-bottom: 15px;">
                <input type="tel" name="reg_phone" placeholder="{{ t.phone }}" style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;">
            </div>
            <div style="margin-bottom: 15px;">
                <input type="password" name="reg_password" placeholder="{{ t.password }}" required style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; font-size: 14px; outline: none; box-sizing: border-box;">
            </div>
            
            <!-- CAPTCHA Box -->
            <div style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px dashed var(--border-color, #334155); text-align: center;">
                <label style="font-weight: 600; color: var(--text-muted, #94a3b8); display: block; margin-bottom: 10px; font-size: 14px;">
                    {{ t.captcha_label }} <strong style="color: var(--text-main, #f8fafc); font-size: 18px;">{{ captcha_text }}</strong> ? *
                </label>
                <input type="number" name="reg_captcha" placeholder="{{ t.captcha_ph }}" required style="width: 120px; padding: 10px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; text-align: center; font-size: 16px; font-weight: bold; outline: none;">
            </div>
            
            <button type="submit" style="width: 100%; padding: 14px; background: var(--primary, #f97316); color: white; border: none; border-radius: 6px; font-weight: 800; cursor: pointer; font-size: 14px; text-transform: uppercase; transition: 0.2s; margin-bottom: 15px;">
                {{ t.btn_register }}
            </button>
        </form>

        <div style="display: flex; align-items: center; text-align: center; margin: 20px 0; color: var(--text-muted, #94a3b8); font-size: 13px; font-weight: 600; text-transform: uppercase;">
            <span style="flex: 1; border-bottom: 1px solid var(--border-color, #334155); margin-right: .5em;"></span> OR <span style="flex: 1; border-bottom: 1px solid var(--border-color, #334155); margin-left: .5em;"></span>
        </div>

        <!-- Εγγραφή με Google -->
        <a href="google_auth.php" style="display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px; background: #ffffff; color: #3c4043; border: 1px solid #dadce0; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; text-decoration: none; box-sizing: border-box; margin-bottom: 15px;">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" alt="Google Logo" style="width: 18px; height: 18px; margin-right: 10px;">
            {{ t.btn_google }}
        </a>
        
        <div style="text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-muted, #94a3b8);">
            {{ t.already_have }} <a href="login.php" style="color: var(--primary, #f97316); text-decoration: none; font-weight: 700;">{{ t.login }}</a>
        </div>

        <!-- Εναλλαγή Γλώσσας -->
        <div style="text-align: center; margin-top: 25px;">
            <a href="?lang=el" style="text-decoration: none; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; background: {% if current_lang == 'el' %}var(--primary, #f97316){% else %}rgba(255,255,255,0.05){% endif %}; color: {% if current_lang == 'el' %}white{% else %}var(--text-muted, #94a3b8){% endif %}; border: 1px solid var(--border-color, #334155); margin: 0 4px;">GR</a>
            <a href="?lang=en" style="text-decoration: none; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 20px; background: {% if current_lang == 'en' %}var(--primary, #f97316){% else %}rgba(255,255,255,0.05){% endif %}; color: {% if current_lang == 'en' %}white{% else %}var(--text-muted, #94a3b8){% endif %}; border: 1px solid var(--border-color, #334155); margin: 0 4px;">EN</a>
        </div>
    </div>
</div>
{% endblock %}