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

{% block title %}Hello ProfileController!{% endblock %}
{% block myTitle %}Profil de {{userData.username}}{% endblock %}
{% block body %}
<main class="container">
    <div class="row">
        <div class="col-4">
            <div class="card bg-info">
                <div class="card-body">
                    <h4 class="card-title">{{userData.username}}</h4>
                    <p>E-mail : {{userData.email}}</p>
                    <p>Date d'inscription : {{userData.inscription_date}}</p>
                    <p>Role : {{userData.role}}</p>
                    <p>Processus de connexion utilisé :</p>
                    <p>
                        {% if userData.discord_id != null %}
                        <span class="btn-discord rounded p-2 border"> Connecté via Discord <i class="fab fa-discord"></i></span>
                        {% else %}
                        Connecté sans Discord
                        {% endif %}
                    </p>
                </div>
            </div>
            <div class="m-2">
                <p><a class="btn btn-primary" href="{{path('add_character')}}">Ajouter un personnage <i class="fas fa-plus"></i></a></p>
                <p><a class="btn btn-primary" href="{{path('character_list')}}">Ajouter un personnage à partir du roster de guilde <i class="fas fa-plus"></i></a></p>
            </div>
        </div>
        <div class="col">
            <div class="row">
                {% for char in characters %}
                <div class="col-4">
                    <div class="card bg-info">
                        <img class="card-img-top" src="{{asset('img/Wow-Icons-master/images/crests/' ~ char.class ~ '.png')}}" alt="" />
                        <div class="card-body">
                            <h4 class="card-title">{{char.name}}</h4>
                            <p>Classe : {{char.class}}</p>
                            <p>Spécialisation : {{char.specialization}}</p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

    </div>


</main>


{% endblock %}