<!-- 
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
    <div class="p-fluid flex flex-column lg:flex-row">
        <menu-account></menu-account>
        <div class="surface-card p-5 shadow-2 border-round flex-auto">
            <div class="text-900 font-semibold text-lg mt-3">My Favorites</div>
            <p-divider></p-divider>        
            <p-table [value]="favorites" [tableStyle]="{ 'min-width': '50rem' }"  dataKey="id" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10, 20, 50]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
                <ng-template pTemplate="header">
                    <tr>
                        <th class="wide-column">Title</th>
                        <th>Category</th>
                        <th>Located in</th>
                        <th></th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-listing>
                    <tr>
                        <td class="wide-column line-height-3">{{ listing.title }}</td>
                        <td>{{ selectOptions.getListingsCategory(listing.listingsCategory) }}</td>
                        <td>{{ selectOptions.getState(listing.state) }}</td>
                        <td>
                            <button pButton pRipple icon="pi pi-eye" class="p-button-rounded p-button-success mr-2" [routerLink]="['/details',listing.id]"></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>    
        </div>
    </div>
</div> -->
