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

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

{% block body %}
    <div class="absolute mt-10 top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        {% for flashMessage in app.session.flashbag.get('error') %}
            <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-3" role="alert">
                <p class="font-bold">Be Warned</p>
                <p>{{ flashMessage }}</p>
            </div>
        {% endfor %}
        {% for flashMessage in app.session.flashbag.get('success') %}
            <div class="bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md mb-3" role="alert">
                <div class="flex">
                    <div>
                        <p class="font-bold">Success</p>
                        <p class="text-sm">{{ flashMessage }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="bg-gray-100 h-screen w-screen">
        <div class="flex items-center flex-1 h-full justify-center px-4 flex-col">
            <!-- Carré blanc -->
            <div class="w-3/4 sm:w-3/4 lg:w-1/4 rounded-lg shadow-lg bg-white" style="height: 500px;">
                <div class="w-full p-4">
                    <div class="flex flex-col flex-1 justify-center my-8">
                        <div class="m-auto rounded-full">
                            <img src="{{ asset('images/BIVperform-light.jpg') }}" alt="" class="w-64 lg:w-96">
                        </div>
                        <div class="w-full mt-4">
                            <form class="form-horizontal w-3/4 mx-auto" method="POST" action="#">
                                <div class="flex flex-col mt-4">
                                    <input id="inputEmail" type="email" class="flex-grow h-8 px-2 border rounded border-grey-400" name="_username" value="" placeholder="Email" autocomplete="email">
                                </div>
                                {% if error %}
                                    <div>
                                        <div class="text-sm text-red-500 mt-2">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                                    </div>
                                {% endif %}
                                <div class="flex flex-col mt-4">
                                    <input id="inputPassword" type="password" name="_password" class="flex-grow h-8 px-2 rounded border border-grey-400" required placeholder="Password" autocomplete="current-password">
                                </div>
                                <div class="flex flex-col mt-8">
                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded">Login</button>
                                </div>
                            </form>
                            <div class="text-center mt-4">
                                <a class="no-underline hover:underline text-blue-dark text-xs" href="{{ path('forgotPassword') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-4">
                <a style="text-align: center; font-size: 12px;" href="https://biv-team.com/fr/" target="_blank">
                    Copyright &copy; BIVTeam {{ 'now' | date('Y') }}
                </a>
            </div>
        </div>
    </div>




{#{% extends 'baseLogout.html.twig' %}#}

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

{#{% block body %}#}
{#    <div class="absolute mt-10 top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2">#}
{#        {% for flashMessage in app.session.flashbag.get('error') %}#}
{#            <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-3" role="alert">#}
{#                <p class="font-bold">Be Warned</p>#}
{#                <p>{{ flashMessage }}</p>#}
{#            </div>#}
{#        {% endfor %}#}
{#        {% for flashMessage in app.session.flashbag.get('success') %}#}
{#            <div class="bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md mb-3" role="alert">#}
{#                <div class="flex">#}
{#                    <div>#}
{#                        <p class="font-bold">Success</p>#}
{#                        <p class="text-sm">{{ flashMessage }}</p>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        {% endfor %}#}
{#    </div>#}

{#    <div class="bg-gray-100 h-screen w-screen">#}
{#        <div class="flex items-center flex-1 h-full justify-center px-4 bg-blue-400">#}
{#            <div class="w-3/4 sm:w-3/4 lg:w-1/4 rounded-lg shadow-lg bg-white" style="height: 500px">#}
{#                <div class="w-full p-4">#}
{#                    <div class="flex flex-col flex-1 justify-center my-8">#}
{#                        <div class="m-auto rounded-full">#}
{#                            <img src="{{ asset('images/BIVperform-light.jpg') }}" alt="" class="w-64 lg:w-96">#}
{#                        </div>#}
{#                        <div class="w-full mt-4">#}
{#                            <form class="form-horizontal w-3/4 mx-auto" method="POST" action="#">#}
{#                                <div class="flex flex-col mt-4">#}
{#                                    <input id="inputEmail" type="email" class="flex-grow h-8 px-2 border rounded border-grey-400" name="_username" value="" placeholder="Email" autocomplete="email">#}
{#                                </div>#}
{#                                {% if error %}#}
{#                                <div>#}
{#                                    <div class="text-sm text-red-500 mt-2">{{ error.messageKey|trans(error.messageData, 'security') }}</div>#}
{#                                </div>#}
{#                                {% endif %}#}
{#                                <div class="flex flex-col mt-4">#}
{#                                    <input id="inputPassword" type="password" name="_password" class="flex-grow h-8 px-2 rounded border border-grey-400" required placeholder="Password" autocomplete="current-password">#}
{#                                </div>#}
{#                                <div class="flex flex-col mt-8">#}
{#                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">#}
{#                                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded">Login</button>#}
{#                                </div>#}
{#                            </form>#}
{#                            <div class="text-center mt-4">#}
{#                                <a class="no-underline hover:underline text-blue-dark text-xs" href="{{ path('forgotPassword') }}">#}
{#                                    Forgot Your Password?#}
{#                                </a>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <a style="text-align: center; font-size: 12px;" class="text-dark" href="https://biv-team.com/fr/" target="_blank">Copyright &copy; BIVTeam {{ 'now' | date('Y') }}</a>#}
{#        </div>#}
{#    </div>#}








{#    <div class="bg-gray-100 h-screen w-screen">#}
{#        <div class="flex flex-col items-center flex-1 h-full justify-center px-4 sm:px-0">#}
{#            <div class="flex rounded-lg shadow-lg w-1/2 sm:w-3/4 lg:w-1/2 bg-white sm:mx-0" style="height: 500px">#}
{#                <div class="flex flex-col w-full md:w-1/2 p-4">#}
{#                    <div class="flex flex-col flex-1 justify-center mb-8">#}
{#                        <div class="m-auto rounded-full">#}
{#                            <img src="{{ asset('images/BIVperform-light.jpg') }}" alt="" class="w-64 lg:w-96">#}
{#                        </div>#}
{#                        <h1 class="text-4xl text-center font-thin">Login</h1>#}
{#                        <div class="w-full mt-4">#}
{#                            <form class="form-horizontal w-3/4 mx-auto" method="POST" action="#">#}
{#                                <div class="flex flex-col mt-4">#}
{#                                    <input id="inputEmail" type="email" class="flex-grow h-8 px-2 border rounded border-grey-400" name="_username" value="" placeholder="Email" autocomplete="email">#}
{#                                </div>#}
{#                                <div class="flex flex-col mt-4">#}
{#                                    <input id="inputPassword" type="password" name="_password" class="flex-grow h-8 px-2 rounded border border-grey-400" required placeholder="Password" autocomplete="current-password">#}
{#                                </div>#}
{#                                <div class="flex flex-col mt-8">#}
{#                                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">#}
{#                                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded">Login</button>#}
{#                                </div>#}
{#                            </form>#}
{#                            <div class="text-center mt-4">#}
{#                                <a class="no-underline hover:underline text-blue-dark text-xs" href="{{ path('forgotPassword') }}">#}
{#                                    Forgot Your Password?#}
{#                                </a>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="m-auto rounded-full">#}
{#                    <img src="{{ asset('images/BIVperform-light.jpg') }}" alt="" class="w-64 lg:w-96">#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}


{#            <div class="flex items-center justify-center h-screen p-2">#}
{#                <div class="block w-screen lg:flex bg-white lg:shadow-lg rounded-lg">#}
{#                    <div class="w-full lg:w-1/3 flex lg:border-r border-gray-200">#}
{#                        <div class="m-auto rounded-full">#}
{#                            <a href="https://biv-team.com/fr/" target="_blank" class="flex items-base pt-10 lg:p-2 -mb-10 lg:-mb-0">#}
{#                                <img src="{{ asset('images/BIVperform-light.jpg') }}" alt="" class="w-64 lg:w-96">#}
{#                            </a>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="w-full lg:w-2/3 px-6 py-16">#}
{#                        <div class="mb-4 font-light tracking-widest text-2xl">LOGIN</div>#}
{#                        <form method="post">#}
{#                            <div class="mb-4">#}
{#                                <label for="inputEmail" class="block mb-2 text-sm text-gray-800">Email</label>#}
{#                                <input type="email" name="_username" id="inputEmail"#}
{#                                       class="focus:border-blue-500 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"#}
{#                                       autocomplete="email" required>#}
{#                                {% if error %}#}
{#                                    <div>#}
{#                                        <div class="text-sm text-red-500 mt-2">{{ error.messageKey|trans(error.messageData, 'security') }}</div>#}
{#                                    </div>#}
{#                                {% endif %}#}
{#                            </div>#}
{#                            <div class="mb-4">#}
{#                                <label for="inputPassword" class="block mb-2 text-sm text-gray-800">Your password</label>#}
{#                                <input type="password" name="_password" id="inputPassword"#}
{#                                       class="focus:border-blue-500 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"#}
{#                                       autocomplete="current-password" required>#}
{#                            </div>#}
{#                            <div class="block md:flex items-center justify-between">#}
{#                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">#}
{#                                <a class="text-gray-600 hover:text-gray-700 no-underline block mt-3" href="{{ path('forgotPassword') }}">#}
{#                                    Forgot Your Password?#}
{#                                </a>#}
{#                                <button type="submit"#}
{#                                        class="flex items-center shadow border-blue-500 border-2 rounded-full px-4 py-2 text-blue-500 hover:bg-blue-500 hover:text-white">#}
{#                                    LOGIN#}
{#                                </button>#}
{#                            </div>#}
{#                        </form>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{% endblock %}