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

{% block title %}{{'Moje konto'|trans }}{% endblock %}

{% block body %}

<h1>
    {{'Moje konto'|trans }}
</h1>
<ul id="breadcrump">
    <li>
        <a href="{{path('home')}}">{{ 'Strona główna'|trans }}</a>
    </li>
    <li>{{ 'Moje konto'|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>
                        {{"Moje informacje"|trans}}
                    </h1>
                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-bold">
                        <strong>{{"Nazwa konta"|trans}}</strong> :
                        {{app.user.username}}
                    </li>
                    <li class="list-group-item text-bold">
                        <strong class="float-start">{{"Adres e-mail"|trans}}</strong> :
                        {{app.user.email}}
                        <a href="#" class="float-end" data-bs-toggle="modal" data-bs-target="#emailModal">
                            {{"Zmień"|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">{{"Discord ID:"|trans}}</strong> :
                        {{app.user.discord}}
                    </li>
                    <li class="list-group-item text-bold">
                        <strong class="float-start">{{"Hasło"|trans}}</strong> : ***********
                        <a href="#" class="float-end disabled" data-bs-toggle="modal" data-bs-target="#passwordModal">
                            {{"Zmień"|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">
                </div>
				   <div class="card-body p-0">
                    <a href="{{path('account.history')}}" class="btn btn-info rounded-0">{{"Historia transakcji"|trans}}</a>
                </div>
            </div>
            <div class="card mt-5">
                <div class="card-header p-0">
                    <h1>
                        {{"Moje punkty"|trans}}
                    </h1>
                </div>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-bold"><strong>{{"punkty"|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">{{"Doładuj punkty"|trans}}</a>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-5">
            <div class="card">
                <div class="card-header p-0">
                    <h1>
                        {{"Moje postacie"|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">{{'Nazwa'|trans}}</th>
                                <th class="c">{{'Płeć'|trans}}</th>
                                <th class="c">{{'Klasa'|trans}}</th>
                                <th class="c">{{'Poziom'|trans}}</th>
                                <th class="c">{{'PD'|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) %} K {%
                                    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">{{ player.Exp }}/{{ player.Exp + player.ExperienceToNextLevel }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <div class="alert alert-info text-dark">
                        {{"Nie znaleziono żadnych postaci"|trans}}
                    </div>
                    {% endif %}

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

<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">{{"Zmień adres e-mail"|trans}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="email" name="email" id="email" class="form-control w-100" placeholder="{{"Twój obecny adres e-mail"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="email" name="newEmail" id="newEmail" class="form-control w-100" placeholder="{{"Twój nowy adres e-mail"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="email" name="emailConfirm" id="emailConfirm" class="form-control w-100"
                            placeholder="{{"Potwierdź nowy adres e-mail"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="password" class="w-100" name="emailPassword" id="emailPassword" placeholder="{{"Twoje hasło"|trans}}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{"Zamknij"|trans}}</button>
                    <button type="submit" class="btn btn-primary">{{"Zapisz"|trans}}</button>
                </div>
            </div>
        </div>
    </div>
</form>

<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">{{"Zmień hasło"|trans}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <input type="password" name="password" id="password" class="form-control w-100" placeholder="{{"Twoje obecne hasło"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="password" name="newPassword" id="newPassword" class="form-control w-100"
                            placeholder="{{"Twoje nowe hasło"|trans}}">
                    </div>
                    <div class="mt-3 mb-3">
                        <input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control w-100"
                            placeholder="{{"Potwierdź nowe hasło"|trans}}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{"Zamknij"|trans}}</button>
                    <button type="submit" class="btn btn-primary">{{"Zapisz"|trans}}</button>
                </div>
            </div>
        </div>
    </div>
</form>

{% endblock %}