<div class="px-2">
    <div *ngIf="noFav" class="no-results text-center mx-auto">No favorite events to show</div>
    <div *ngIf="!noFav">
        <div class="h4 mx-auto my-3" style="color: aquamarine; width: fit-content;">List of your favorite events</div>
        <div class="table-responsive mx-auto rounded rounded-3" style="max-width: 1000px;">
            <table class="table table-light table-hover text-center" style="margin: 0;">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Event</th>
                        <th>Category</th>
                        <th>Venue</th>
                        <th>Favorite</th>
                    </tr>
                </thead>
                <tbody *ngFor = "let fav of favorites; let i = index" [attr.data-index]="i">
                    <tr>
                        <th>{{i+1}}</th>
                        <td>{{fav.date}}</td>
                        <td>{{fav.name}}</td>
                        <td>{{fav.category}}</td>
                        <td>{{fav.venue}}</td>
                        <td style="cursor: pointer;" (click)="deleteFav(fav.id)"><i class="fa-regular fa-trash-can"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>