<div class="container d-flex flex-column align-items-center mt-5">

    <!-- Formulaire d'entrée -->
    <div class="w-50">
        <div class="card shadow-sm">
            <div class="card-body">
                <h4 class="card-title text-center mb-4">Ajouter vos informations</h4>
                    
                <div class="input-group mb-3">
                    <div class="input-group">
                        <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" value="Mr." aria-label="Mr." [(ngModel)]="info.gender" name="gender" (change)="updateGender()">
                        </div>
                        <input type="text" class="form-control" aria-label="Mr." placeholder="Mr." disabled>
                            
                        <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" value="Ms." aria-label="Ms." [(ngModel)]="info.gender" name="gender" (change)="updateGender()">
                        </div>
                        <input type="text" class="form-control" aria-label="Ms." placeholder="Ms." disabled>

                        <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" value="Other." aria-label="Othef=r." [(ngModel)]="info.gender" name="gender" (change)="updateGender()">
                        </div>
                        <input type="text" class="form-control" aria-label="Other." placeholder="Other." disabled>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input type="text" [(ngModel)]="info.nameLast" class="form-control" placeholder="Last name" aria-label="Last name">
                    <span class="input-group-text">&#64;</span>
                    <input type="text" [(ngModel)]="info.nameFirst" class="form-control" placeholder="First name" aria-label="First name">
                </div>
                <div class="input-group mb-3">
                    <input type="text" [(ngModel)]="info.email" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <span class="input-group-text" id="basic-addon2">&#64;edu.igensia.com</span>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text">Adresse</span>
                    <textarea class="form-control" [(ngModel)]="info.address" aria-label="Adresse"></textarea>
                </div>
                <button type="submit" class="btn btn-primary w-100" (click)="addInfo()">Ajouter</button>
            </div>
        </div>
    </div>

    <!-- Liste des commentaires -->
    <div *ngIf="infos.length > 0; else noComment" class="d-flex flex-column align-items-center w-50">
        <h3 class="text-center text-primary">Liste des commentaires</h3>
        <ul class="list-group shadow-sm">
            <li class="list-group-item d-flex justify-content-between align-items-start" *ngFor="let info of infos">
                <div class="ms-2 me-auto">
                    <div class="fw-bold breakWord">{{ info.nameLast }} {{ info.nameFirst }}</div>
                    <div class="fw-bold breakWord"><a href="mailto:{{ info.email }}">{{ info.email }}</a></div>
                    <div class="fw-bold breakWord">{{ info.address }}</div>
                </div>
                <div class="ms-2 me-auto d-flex flex-column">
                    <span class="badge text-bg-primary rounded-pill mb-1">{{ info.gender }}</span>
                    <span class="badge text-bg-success rounded-pill">{{ info.date | date:'dd/MM/yyyy' }}</span>
                </div>                
            </li>
        </ul>
    </div>

    <!-- Message si aucun commentaire -->
    <ng-template #noComment>
        <p class="text-muted text-center mt-3">Aucun commentaire pour le moment</p>
    </ng-template>
</div>
