<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My account</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
    <link
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
            rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="{{base}}/css/styles.css" rel="stylesheet" />
</head>
<body>
{% include 'navBar.twig' %}
<div class="content">
    <div class="border my-2 py-2 border-5 border-secondary rounded-3">
    <h1 class="text-center">My account</h1>
    {% if user is defined %}
        <table>
            <tr><td colspan="2"><img class="logo" src="{{base}}/assets/img/user-avatar.png"></td></tr>
            <tr><td>ID : </td><td>{{user.id}}</td></tr>
            <tr><td>Nickname : </td><td>{{user.nickname}}</td>
                <td>
                    <form action="{{base}}/{{ userRole[0] }}/{{userID}}/modifyNickname" method="POST">
                        <input class="input-group-text d-inline" name="newNickname" type="text" placeholder="new nickname" required>
                        <input class="btn btn-info" type="submit" value="Modify your nickname">
                    </form>
                </td>
            </tr>
            <tr><td>Name : </td><td>{{user.name}}</td></tr>
            <tr><td>Surname : </td><td>{{user.surname}}</td></tr>
            <tr><td>Roles : </td><td>
                {% for role in user.roles %}
                {{ role }}{% if not loop.last %} - {% endif %}
                {% endfor %}</td>
            </tr>
            <tr><td>Email: </td><td>{{user.email}}</td></tr>
            <tr><td>Group : </td><td>{{user.group}}</td></tr>
            <tr><td>Extra Time : </td><td>{{user.extraTime? 'yes' : 'no'}}</td></tr>
        </table>
    </div>
    <div class="border my-2 py-2 border-5 border-secondary rounded-3 text-center">
        <h2> Modify password</h2>
            {% include 'modifyPasswordForm.twig' %}
    </div>
    {% endif %}
</div>
</body>
</html>