<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.gender}}{{info.nameLast}} {{info.nameFirst}}</li>
        <li class="list-group-item">{{info.email}}</li>
        <li class="list-group-item">{{info.address}}, {{info.codePostal}}</li>
    </ul>

    <!-- Champ d'entrée réduit et centré -->
    <div class="w-50">
        <form [formGroup]="messageForm" (ngSubmit)="addComment()">
            <div class="input-group mb-3 shadow-sm">
                <span class="input-group-text" id="message-addon">Message</span>
                <input 
                    type="text"
                    formControlName="message"
                    class="form-control" 
                    aria-describedby="message-addon" 
                    placeholder="Entrez votre message">
                <button 
                    type="submit"
                    class="btn btn-primary" 
                    [disabled]="messageForm.invalid">
                    Add
                </button>
            </div>
        </form>
    </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>
        <div class="list-group shadow-sm w-100">
            <div 
                *ngFor="let msg of comments.slice().reverse()"
                class="list-group-item d-flex justify-content-between align-items-start">
                <div class="ms-2 me-auto">
                    <div class="fw-bold breakWord">{{ msg.user }}</div>
                    <div class="breakWord">{{ msg.message }}</div>
                </div>
                <span class="badge text-bg-primary rounded-pill SpaceMargin-02">
                    {{ msg.date | date:'dd/MM/yyyy' }}
                </span>
            </div>
        </div>
    </div>
    <div *ngIf="commentsAll.length > 0;" class="d-flex flex-column align-items-center w-50">
        <div class="list-group shadow-sm w-100">
            <div 
                *ngFor="let msg of commentsAll" 
                class="list-group-item d-flex justify-content-between align-items-start">
                <div class="ms-2 me-auto">
                    <div class="fw-bold breakWord">{{ msg.user }}</div>
                    <div class="breakWord">{{ msg.message }}</div>
                </div>
                <span class="badge text-bg-primary rounded-pill SpaceMargin-02">
                    {{ msg.date | date:'dd/MM/yyyy' }}
                </span>
            </div>
        </div>
    </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>
