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

{% block title %}{{ t.page_title }}{% endblock %}

{% block content %}
<style>
    /* Κρύβουμε τυχόν sidebar, λίστες κατηγοριών ή αριστερά κουτιά στην οθόνη login */
    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: 70vh; 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: 400px; box-sizing: border-box; text-align: center;">
        
        <h1 style="margin-top: 0; color: var(--primary, #f97316); font-size: 26px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
            {{ t.heading }}
        </h1>
        <p style="color: var(--text-muted, #94a3b8); font-size: 14px; margin-bottom: 30px;">
            {{ t.subheading }}
        </p>

        {% if error %}
            <div style="padding: 12px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; font-size: 13px; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2);">
                {{ error }}
            </div>
        {% endif %}

        <form method="POST" action="login.php">
            <div style="margin-bottom: 20px; text-align: left;">
                <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 13px; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.5px;">
                    {{ t.username }}
                </label>
                <input type="text" name="username" required autofocus style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 14px; outline: none;">
            </div>
            
            <div style="margin-bottom: 20px; text-align: left;">
                <label style="display: block; margin-bottom: 8px; font-weight: 700; font-size: 13px; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.5px;">
                    {{ t.password }}
                </label>
                <input type="password" name="password" required style="width: 100%; padding: 12px; background: #0f172a; border: 1px solid var(--border-color, #334155); color: var(--text-main, #f8fafc); border-radius: 6px; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 14px; outline: none;">
            </div>

            <button type="submit" style="width: 100%; padding: 14px; background: var(--primary, #f97316); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 800; font-size: 14px; text-transform: uppercase; transition: 0.2s; margin-bottom: 15px;">
                {{ t.btn_login }}
            </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;">
            <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="margin-top: 20px; font-size: 14px; color: var(--text-muted, #94a3b8);">
            {{ t.register_text }} <a href="register.php" style="color: var(--primary, #f97316); text-decoration: none; font-weight: 700;">{{ t.register_link }}</a>
        </div>

        <!-- Εναλλαγή Γλώσσας -->
        <div style="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 %}