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

{% block pp %}{{pp}}{% endblock %}

{% block css %}{{css}}{% endblock %}

{% block title %}Ami - HearthTrack{% endblock %}

{% block user %}{{user}} - {{role}}{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Liste d'ami</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="/">Accueil</a></li>
            <li class="breadcrumb-item active">Ami</li>
        </ol>
        
                             <div class="card-body">
                            <div class="datatable-container">                                
                            	<table id="datatablesSimple" class="datatable-table">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Nom</th>
                                            <th>Prénom</th>
                                            <th style="
                                                padding-left: 42%;
                                            ">
                                            <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0" method="get" action="/search-user">
                                                <div class="input-group">
                                                    <input class="form-control" name="username" type="text" placeholder="Rechercher..." aria-label="Rechercher..." aria-describedby="btnNavbarSearch" />
                                                    <button class="btn btn-primary" id="btnNavbarSearch" type="submit"><i class="fas fa-search"></i></button>
                                                </div>
                                            </form>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for utili in users %}
                                        <tr>
                                            <td><style> .image-ronde{ clip-path:ellipse(50% 50%); } </style>
                                            <img src="/assets/img/person/{{utili.img}}.png" width="35px" height="35px" class="image-ronde"></td>
                                            <td>{{utili.nom}}</td>
                                            <td>{{utili.prenom}}</td>
                                            <td style="
                                                padding-left: 45%;">
                                                 <form method="post" action="/add-friend">
                                                    <input type="hidden" name="username" value="{{ utili.username }}">
                                                    <button class="btn btn-primary" type="submit">Ajouter un ami</button>
                                                </form>
                                            
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                </div>
          </div>
    </div>
    <h1>{{responce}}</h1>
{% endblock %}