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

{% block style %}

    <style>
        html {
            height: -webkit-fill-available;
        }

        html, body {
            display:flex;
            flex-grow:1;
        }

        body {
            background: radial-gradient(circle, #f8a9b0 0%,rgba(255, 255, 255, 0.25) 100%),#f8a9b0;
        }

        nav {
            display:none;
        }

        form > div {
            box-shadow: 8px 8px 0px 0px rgba(109, 109, 109, 0.5);
        }

        input {
            padding: 4px 6px 4px 6px;
        }
    </style>

{% endblock %}

{% block title %}Log in!{% endblock %}

{% block body %}
<div class="flex grow flex-col items-center justify-center">
    <div class="flex space-x-10">
        <div class="flex flex-col text-center text-white">
            <img src="{{ asset('img/logo.png') }}" class="h-[260px] object-cover">
            <h1 class="text-6xl">tChat</h1>
            <q class="mt-2">Internet are part of our life, but cats too.</q>
        </div>
        <form method="post" class="flex">
            {% if app.user %}
                <div class="mb-3">
                    You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
                </div>
            {% endif %}

            <div class="flex flex-col bg-[#F0DEE7] p-6 rounded-xl items-center">
                <h1 class="text-4xl text-center pb-6">Connexion</h1>
                <div class="text-xl flex flex-col space-y-2">
                    <label for="inputUsername">Nom d'utilisateur</label>
                    <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control" autocomplete="username" required autofocus>
                    <label for="inputPassword">Mot de passe</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    <div class="checkbox mb-3">
                        <label>
                            <input type="checkbox" name="_remember_me" class="mr-2">Rester connecté
                        </label>
                    </div>
                    {% if error %}
                        <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                    {% endif %}
                </div>
                <button class="btn btn-lg btn-primary text-xl mt-6 bg-[#f8a9b0] w-fit py-2 px-4 rounded-full text-white hover:bg-white hover:text-[#f8a9b0] transition duration-300 ease-in-out" type="submit">
                    Se connecter
                </button>
            </div>
        </form>
    </div>
    <button class="mt-10 bg-[#F0DEE7] py-2 px-4 rounded-xl" onclick="document.getElementById('infos').classList.remove('hidden');">Vous visitez mon site ? Cliquez !</button>
    <div id="infos" class="hidden content-center fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-80 z-50">
        <div class="flex h-full items-center justify-center relative">
            <button onclick="document.getElementById('infos').classList.add('hidden');"
                    class="absolute top-4 right-4 text-white text-4xl font-bold">
                &times;
            </button>
            <div class="text-white space-y-6 w-3/4 p-6 bg-gray-800 bg-opacity-90 rounded-lg shadow-lg">
                <h1 class="text-5xl text-center font-bold mb-8 text-[#f8a9b0]">Bienvenue sur tChat !</h1>
                <p class="leading-relaxed text-lg">
                    Tout d'abord, merci de prendre votre temps pour découvrir un de mes projets les plus complets. Ce site a pour objectif de <span class="font-bold text-[#f8a9b0]">continuer de développer mes compétences tout en proposant quelque chose de concret</span> afin de pouvoir avoir matière à proposer dans mon futur.
                </p>
                <p class="leading-relaxed text-lg">
                    Vous vous trouvez donc sur mon tout premier gros projet nommé <span class="font-bold text-[#f8a9b0]">tChat</span>, un <span class="font-bold text-[#f8a9b0]">réseau social</span> qui n'a pas pour objectif d'être publié au grand public mais d'être aussi fonctionnel et complet que ces derniers. Certaines parties sont donc simplifiées, mais l'objectif reste de <span class="font-bold text-[#f8a9b0]">proposer une expérience la plus proche possible d'un véritable réseau social</span> comme X, Instagram ou encore Facebook.
                </p>
                <p class="leading-relaxed text-lg">
                    Le processus de création de compte est volontairement indisponible et n'a pas pour vocation dans un futur proche d'être intégré. Néanmoins, voici un compte prêt spécialement pour vous !
                </p>
                <div class="bg-gray-700 p-4 rounded-lg text-center">
                    <p class="font-bold text-lg">- Identifiant : <span class="text-[#f8a9b0]">MLyshu</span></p>
                    <p class="font-bold text-lg">- Mot de passe : <span class="text-[#f8a9b0]">password</span></p>
                </div>
                <p class="leading-relaxed text-lg">
                    Pourquoi ce choix ? Tout simplement pour me permettre de vous <span class="font-bold text-[#f8a9b0]">offrir la meilleure expérience possible</span> à mon sens de ce que mon site peut vous proposer. Est-ce la meilleure solution ? Probablement pas, mais c'est selon moi la solution la plus simple et efficace pour une simple démonstration et non une utilisation quotidienne.
                </p>
                <p class="leading-relaxed text-lg">
                    Je tiens à préciser que <span class="font-bold text-[#f8a9b0]">toutes les données textuelles contenues dans les utilisateurs, posts, et commentaires</span> sont des données purement générées via <span class="font-bold text-[#f8a9b0]">Fixtures</span> et <span class="font-bold text-[#f8a9b0]">Faker</span> de Symfony. Les images de profils sont des images ne m'appartenant pas et sont trouvables sur internet. <span class="font-bold text-[#f8a9b0]">Les images des posts sont de ma propriété et ont été prises par mes soins</span>.
                </p>
                <p class="leading-relaxed text-lg text-center">
                    Sur ce bonne visite ! (En espérant qu'il n'y ait pas de bug, dans le cas contraire n'hésitez pas à me le faire savoir :D !)
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}