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

{% block title %} | Login {% endblock %}

{% block content %}

<div class="container container-tight">
    <div class="text-center mb-4">
        <span class="navbar-brand navbar-brand-autodark">
            <img src="{{ asset('images/login/ticketier.png') }}" width="110" height="32" alt="Tabler" class="navbar-brand-image">
        </span>
    </div>
    <div class="card card-md" style="border-top: 3px solid #E81341;">
        <h2 class="h2 text-center mb-4" style="margin-top: 30px">Login to your account</h2>
        <div class="row" style="margin-bottom: 45px">
            <div class="col-10 col-sm-10 col-md-10 col-lg-10 m-auto">
                <a href="{{ path('hwi_oauth_service_redirect', {'service': 'google' }) }}" class="btn btn-4 w-100 login-with-google-btn">
                    Login with Google
                </a>
            </div>
        </div>
        <div class="hr-text">OR</div>
        <div class="card-body">
            <form method="post">

                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                {% if error  %}
                <span style="color: red;margin-bottom: 10px" class="mb-2">Mismatch in login details. Please try again</span>
                {% endif %}

                <div class="mb-3">
                    <label class="form-label">Email address</label>
                    <input 
                        type="email" 
                        class="form-control {% if error %} is-invalid{% endif %}"
                        placeholder="Enter your email address" 
                        value="{{ last_username }}" 
                        name="_username" 
                        id="username" 
                        required autocomplete="off" autofocus>

                    {% if error %}
                    <span class="invalid-feedback" role="alert">
                        <strong>Check your Email Address</strong>
                    </span>
                    {% endif %}

                </div>
                <div class="form-group mb-2">
                    <label class="form-label">Password</label>
                    <input 
                        id="password" 
                        type="password" 
                        placeholder="Password" 
                        class="form-control {% if error %} is-invalid{% endif %}"
                        name="_password" 
                        required autocomplete="current-password">

                    {% if error %}
                    <span class="invalid-feedback" role="alert">
                        <strong>Check your password</strong>
                    </span>
                    {% endif %}

                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100">Sign in</button>
                </div>
            </form>
        </div>
    </div>
    <div class="text-center text-secondary mt-3">
        Don't have account yet? <a href="/register" tabindex="-1">Sign up</a>
    </div>
</div>

{% endblock %}