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

{% block title %}
    Mon Profil
{% endblock %}

{% block body %}
    <div class="container mt-5 d-flex flex-column justify-content-center align-items-center profile-page">
        <div class="col-12 col-lg-6 mx-auto mb-3 bg-light p-4 card shadow-sm">
            <div class="d-flex flex-column align-items-center">
                <h2 class="mb-4 text-center">ShrekDu44</h2>
                <img src="{{ asset('placeholder.jpg') }}" class="profile-picture rounded-circle mb-5" alt="">
            </div>
            <div class="form-group row mb-3">
                <label for="prenom" class="col-sm-4 col-form-label">Prénom</label>
                <div class="col-sm-8">
                    <p class="form-control-plaintext" id="prenom">Shrek</p>
                </div>
            </div>

            <div class="form-group row mb-3">
                <label for="nom" class="col-sm-4 col-form-label">Nom</label>
                <div class="col-sm-8">
                    <p class="form-control-plaintext" id="nom">Placeholder</p>
                </div>
            </div>

            <div class="form-group row mb-3">
                <label for="telephone" class="col-sm-4 col-form-label">Téléphone</label>
                <div class="col-sm-8">
                    <p class="form-control-plaintext" id="telephone">0780078007</p>
                </div>
            </div>

            <div class="form-group row mb-3">
                <label for="email" class="col-sm-4 col-form-label">Email</label>
                <div class="col-sm-8">
                    <p class="form-control-plaintext" id="email">shrek@romainpourquoiencorecetteimage.fr</p>
                </div>
            </div>

            <div class="form-group row mb-3">
                <label for="ville" class="col-sm-4 col-form-label">Ville de rattachement</label>
                <div class="col-sm-8">
                    <p class="form-control-plaintext" id="ville">ENI Nantes</p>
                </div>
            </div>

            <div class="form-group row mb-3">
                <div class="col-sm-10 mx-auto text-center">
                    <a href="#" class="btn btn-lg btn-danger mt-3 mx-2">Retour</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}