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

{% block title %}Sign In{% endblock %}

{% block opengraph %}
<meta property="og:title" content="Sign In — {{ site_name }}">
<meta property="og:description" content="Sign in to your {{ site_name }} account">
<meta property="og:image" content="{{ absolute_url(asset('images/web-banner.png')) }}">
<meta property="og:url" content="{{ app.request.uri }}">
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ site_name }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Sign In — {{ site_name }}">
<meta name="twitter:image" content="{{ absolute_url(asset('images/web-banner.png')) }}">
{% endblock %}

{% block body %}
<div class="auth-split">

    {# Left — Branded panel #}
    <div class="auth-split__brand d-none d-md-flex">
        <img src="{{ asset('images/logo.png') }}" alt="{{ site_name }}" class="auth-split__logo">
    </div>

    {# Right — Form panel #}
    <div class="auth-split__form">
        <div class="auth-split__inner">

            {# Mobile logo #}
            <div class="text-center mb-4 d-md-none">
                <img src="{{ asset('images/logo.png') }}" alt="{{ site_name }}" style="height: 149px; width: auto;">
            </div>

            <h1 class="auth-title">Sign in</h1>
            <p class="auth-subtitle">Welcome back</p>

            {% if app.request.query.get('idle') == '1' %}
                <div class="alert alert-warning mb-4" role="alert">
                    You were logged out because you watched 5 rounds without placing a bet.
                </div>
            {% endif %}

            {% if error %}
                <div class="alert alert-danger mb-4" role="alert" data-testid="login-error">
                    {{ error.messageKey|trans(error.messageData, 'security') }}
                </div>
            {% endif %}

            {% for flash in (_flashes['success'] ?? []) %}
                <div class="alert alert-success mb-4" role="alert">{{ flash }}</div>
            {% endfor %}

            <form method="post" data-testid="login-form" data-turbo="false">

                <div class="mb-3">
                    <label for="inputMobile" class="form-label">Mobile Number</label>
                    <input
                        type="tel"
                        id="inputMobile"
                        name="_username"
                        value="{{ last_username }}"
                        class="form-control form-control-lg"
                        autocomplete="tel"
                        required
                        autofocus
                        data-testid="input-mobile"
                        placeholder="09XXXXXXXXX"
                    >
                </div>

                <div class="mb-3">
                    <label for="inputPassword" class="form-label">Password</label>
                    <input
                        type="password"
                        id="inputPassword"
                        name="_password"
                        class="form-control form-control-lg"
                        autocomplete="current-password"
                        required
                        data-testid="input-password"
                    >
                </div>

                <div class="mb-4 d-flex align-items-center gap-2">
                    <input
                        type="checkbox"
                        class="form-check-input mt-0"
                        id="rememberMe"
                        name="_remember_me"
                        checked
                        data-testid="checkbox-remember-me"
                    >
                    <label for="rememberMe" class="form-label mb-0">Remember me</label>
                </div>

                <div class="d-grid mb-3">
                    <button type="submit" class="btn btn-primary btn-lg" data-testid="btn-login">
                        Sign in
                    </button>
                </div>

            </form>

            <p class="text-center mb-0 form-hint">
                Don't have an account?
                <a href="{{ path('app_register') }}" data-testid="link-register" class="fw-medium">Create one</a>
            </p>

        </div>
    </div>
</div>
{% endblock %}