psp_panel/src/app/shared/components/card-data.component.html

<p-card>
  <ng-template #title>
    <ng-container [ngTemplateOutlet]="header">
      <div class="flex items-center gap-10 justify-between">
        <div class="flex items-center gap-2">
          @if (backRoute) {
            <p-button icon="pi pi-arrow-right" aria-label="بازگشت" size="small" outlined [routerLink]="backRoute" />
          }
          <h5 class="font-bold py-1.5">{{ cardTitle }}</h5>
        </div>
        <div class="flex items-center gap-2 shrink-0">
          <ng-container [ngTemplateOutlet]="moreActions"></ng-container>
          @if (showRefresh) {
            <p-button icon="pi pi-refresh" outlined size="small" (click)="refresh()"></p-button>
          }
          @if (editable) {
            <button
              pButton
              type="button"
              [icon]="`pi ${editMode ? 'pi-times' : 'pi-pencil'}`"
              outlined
              size="small"
              (click)="onEditClick()"
            ></button>
          }
        </div>
      </div>
    </ng-container>
    <hr />
  </ng-template>
  <ng-content></ng-content>
</p-card>