{% extends 'Application/' ~ settings.get("theme") ~'/base.html.twig' %}

{% block title %}{{'Mon compte'|trans }}{% endblock %}

{% block body %}

<h1>
    {{'Mon compte'|trans }}
</h1>
<ul id="breadcrump">
    <li>
        <a href="{{path('home')}}">{{ 'Accueil'|trans }}</a>
    </li>
    <li>{{ 'Mon compte'|trans }}</li>
</ul>

<div id="middle">

    {% for message in app.flashes('success') %}
    <div class="alert alert-success text-dark">
        {{ message }}
    </div>
    {% endfor %}

    {% for message in app.flashes('error') %}
    <div class="alert alert-danger text-dark">
        {{ message }}
    </div>
    {% endfor %}

    <section class="row mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header p-0">
                    <h1>
                        {{"Mes informations"|trans}}
                    </h1>
                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-bold">
                        <strong>{{"Nom de compte"|trans}}</strong> :
                        {{app.user.username}}
                    </li>
                    <li class="list-group-item text-bold">
                        <strong class="float-start">{{"Adresse e-mail"|trans}}</strong> :
                        {{app.user.email}}
                        <a href="#" class="float-end" data-bs-toggle="modal" data-bs-target="#emailModal">
                            {{"Modifier"|trans}}
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-pencil-square" viewBox="0 0 16 16">
                                <path
                                    d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                <path fill-rule="evenodd"
                                    d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                            </svg>
                        </a>
                    </li>
                    <li class="list-group-item text-bold">
                        <strong class="float-start">{{"Mot de passe"|trans}}</strong> : ***********
                        <a href="#" class="float-end disabled" data-bs-toggle="modal" data-bs-target="#passwordModal">
                            {{"Modifier"|trans}}
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-pencil-square" viewBox="0 0 16 16">
                                <path
                                    d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                <path fill-rule="evenodd"
                                    d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
                            </svg>
                        </a>
                    </li>
                </ul>
                <div class="card-body p-0">
                    <a href="{{path('account.history')}}" class="btn btn-info rounded-0">{{"Historique de transaction"|trans}}</a>
                </div>
            </div>
            <div class="card mt-5">
                <div class="card-header p-0">
                    <h1>
                        {{"Mes points"|trans}}
                    </h1>
                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-bold"><strong>{{"points"|trans|capitalize}}</strong> :
                        {{app.user.points}}</li>
                </ul>
                <div class="card-body p-0">
                    <a href="{{path('account.credit.reload')}}" class="btn btn-primary rounded-0">{{"Rechargement crédits"|trans}}</a>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-5">
            <div class="card">
                <div class="card-header p-0">
                    <h1>
                        {{"Mes personnages"|trans}}
                    </h1>
                </div>
                <div class="card- p-0">
                    {% if players >= 1 %}
                    <table class="table table-hover text-center">
                        <thead class="text-center bg-table">
                            <tr>
                                <th class="i">{{'Nom'|trans}}</th>
                                <th class="c">{{'Sexe'|trans}}</th>
                                <th class="c">{{'Classe'|trans}}</th>
                                <th class="c">{{'Niveau'|trans}}</th>
                                <th class="c">{{'EXP'|trans}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for player in players %}
                            <tr>
                                <td class="i">{{ player.Name }}</td>
                                <td class="c">{% if (player.Gender == 0) %} M {% elseif (player.Gender == 1) %} F {%
                                    endif %}</td>
                                <td class="i">{% for class in classes %}{% if (class.Value.Id == player.ClassId) %}{{
                                    class.Value.Name
                                    }}{%
                                    endif %}{% endfor %}</td>
                                <td class="c">{{ player.Level }}</td>
                                <td class="c">
                                    {% if player.Level == settings.get("max_level") %}
                                    <strong>{{'Niveau max atteint !'|trans}}</strong>
                                    {% else %}
                                    <b>{{ player.Exp }}/{{player.Exp + player.ExperienceToNextLevel }}</b>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <div class="alert alert-info text-dark">
                        {{"Aucun enregistrement trouvé"|trans}}
                    </div>
                    {% endif %}

                </div>
            </div>
    </section>
</div>

<!-- Modal : Modification de l'adresse e-mail -->
<form method="POST">
    <div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{"Modifier l'adresse e-mail"|trans}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="email" name="email" id="email" class="form-control w-100" placeholder="{{" Votre
                            adresse e-mail actuel"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="email" name="newEmail" id="newEmail" class="form-control w-100" placeholder="{{"
                            Votre nouvelle adresse e-mail"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="email" name="emailConfirm" id="emailConfirm" class="form-control w-100"
                            placeholder="{{" Confirmer votre nouvelle adresse e-mail"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="password" class="w-100" name="emailPassword" id="emailPassword" placeholder="{{"
                            Votre mot de passe"|trans}}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{"Fermer"|trans}}</button>
                    <button type="submit" class="btn btn-primary">{{"Sauvegarder"|trans}}</button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Modal : Modification du mot de passe -->
<form method="POST">
    <div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{"Modifier le mot de passe"|trans}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="password" name="password" id="password" class="form-control w-100" placeholder="{{"
                            Votre mot de passe actuel"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="password" name="newPassword" id="newPassword" class="form-control w-100"
                            placeholder="{{" Votre nouveau mot de passe"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control w-100"
                            placeholder="{{" Confirmer votre nouveau mot de passe"|trans}}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{"Fermer"|trans}}</button>
                    <button type="submit" class="btn btn-primary">{{"Sauvegarder"|trans}}</button>
                </div>
            </div>
        </div>
    </div>
</form>

{% endblock %}