source: trip-planner-front/src/app/planner/planner.component.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<p-toast></p-toast>


<nav class="navbar navbar-light bg-light justify-content-between">
  <button pButton pRipple type="button" label="Create initial planner" class="p-button-help " (click)="show()"></button>
  <form class="form-inline">
    <span>Hello, {{userDisplayName}}</span>
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="onClickLogout()">Log out</button>
  </form>
</nav>

<button pButton pRipple type="button" label="Add location" class="p-button-help " (click)="onClickAddLocation()"></button>

<br>
<br>
<p-table [value]="planners" [paginator]="true" [rows]="3" [responsive]="true">

  <ng-template pTemplate="body" let-planner>
    <td>
      <p-card header="{{planner.name}}" subheader="Card Subheader" [style]="{width: '360px'}"
        styleClass="p-card-shadow">
        <ng-template pTemplate="header">
        </ng-template>
        <p>{{planner.description}}</p>
        <ng-template pTemplate="footer">
          <button pButton pRipple type="button" label="Edit" class="p-button-outlined p-button-rounded p-button-help"
            (click)="onClickEditPlannerGet(planner.id)"></button>
          <button pButton pRipple type="button" icon="pi pi-times"
            class="p-button-rounded p-button-danger p-button-outlined" label="Delete"
            [style]="{'margin-left': '.5em'}" (click)="onDeletePlanner(planner.id)"></button>
        </ng-template>
      </p-card>
    </td>
  </ng-template>
</p-table>