<div class="container d-flex flex-column align-items-center mt-4">
    <!-- Liste des informations avec un style amélioré -->
    <ul class="list-group w-50 shadow-sm mb-4">
        <li class="list-group-item active text-center">Informations</li>
        <li class="list-group-item">{{info.name}}</li>
        <li class="list-group-item">{{info.email}}</li>
        <li class="list-group-item">{{info.phone}}</li>
    </ul>

    <!-- Champ d'entrée réduit et centré -->
    <div class="w-50">
        <div class="input-group mb-3 shadow-sm">
            <span class="input-group-text">Message</span>
            <input type="text" [(ngModel)]="comment.message" (keydown.enter)="addComment()" class="form-control">
            <button type="submit" (click)="addComment()" class="btn btn-primary">Add</button>
        </div>
    </div>

    <!-- Liste des commentaires -->
    <div *ngIf="comments.length > 0; else noComment" class="d-flex flex-column align-items-center w-50">
        <h3 class="text-center text-primary">Liste des commentaires</h3>
        <ol class="list-group list-group-numbered shadow-sm">
            <li class="list-group-item d-flex justify-content-between align-items-start" *ngFor="let comment of comments">
                <div class="ms-2 me-auto">
                    <div class="fw-bold breakWord">{{ comment.message }}</div>
                </div>
                <!-- <span>&nbsp;&nbsp;</span> -->
                <span class="badge text-bg-primary rounded-pill SpaceMargin-02">{{ comment.date | date:'dd/MM/yyyy' }}</span>
            </li>
        </ol>
    </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>
