<div class="container">
  <div class="card">
    <div class="card-header">
      <h2>{{displayName}} Management</h2>
      <button pButton pRipple type="button" icon="pi pi-plus" label="Create" 
              class="p-button-success" (click)="showCreateModal()"></button>
    </div>
    
    <div class="card-body">
      <!-- Data Table -->
      <p-table [value]="items" [paginator]="true" [rows]="itemsPerPage" 
               [totalRecords]="totalItems" [loading]="loading"
               (onPage)="onPageChange($event)" [rowsPerPageOptions]="[5,10,25,50]">
        
        <ng-template pTemplate="header">
          <tr>
            {{#tableColumns}}
            <th>{{label}}</th>
            {{/tableColumns}}
            <th>{{morphName}} Type</th>
            <th>{{morphName}}</th>
            <th>Actions</th>
          </tr>
        </ng-template>
        
        <ng-template pTemplate="body" let-item>
          <tr>
            {{#tableColumns}}
            <td>{{fieldAccessor}}</td>
            {{/tableColumns}}
            <td>
              <span class="badge bg-info">
                {{ item.{{morphName}}_type ? item.{{morphName}}_type.split('\\').pop() : 'None' }}
              </span>
            </td>
            <td>{{ getPolymorphicEntityLabel(item) }}</td>
            <td>
              <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" 
                      (click)="showEditModal(item)"></button>
              <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-danger" 
                      (click)="confirmDelete(item)"></button>
            </td>
          </tr>
        </ng-template>
        
        <ng-template pTemplate="emptymessage">
          <tr>
            <td [attr.colspan]="{{tableColumns.length + 3}}" class="text-center">
              No records found
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  </div>
  
  <!-- Create/Edit Modal -->
  <p-dialog [(visible)]="displayModal" [style]="{width: '500px'}" [header]="modalTitle" 
            [modal]="true" styleClass="p-fluid">
    <form [formGroup]="form" (ngSubmit)="saveItem()">
      <!-- Regular Fields -->
      {{#formFields}}
      <div class="field">
        <label for="{{name}}">{{label}}</label>
        {{#isTextarea}}
        <textarea id="{{name}}" pInputTextarea formControlName="{{name}}" 
                  [rows]="5" [cols]="30"></textarea>
        {{/isTextarea}}
        {{#isInput}}
        <input id="{{name}}" type="{{inputType}}" pInputText formControlName="{{name}}">
        {{/isInput}}
        {{#isSelect}}
        <p-dropdown id="{{name}}" [options]="{{optionsName}}" formControlName="{{name}}"
                   placeholder="Select a {{label}}" optionLabel="{{optionLabel}}" optionValue="{{optionValue}}"></p-dropdown>
        {{/isSelect}}
        <small *ngIf="form.get('{{name}}').invalid && form.get('{{name}}').touched" class="p-error">
          {{label}} is required
        </small>
      </div>
      {{/formFields}}
      
      <!-- Polymorphic Relation -->
      <div class="field">
        <label for="{{morphName}}_type">{{morphLabel}} Type</label>
        <p-dropdown id="{{morphName}}_type" [options]="polymorphicTypes" formControlName="{{morphName}}_type"
                   placeholder="Select a type" optionLabel="label" optionValue="value"></p-dropdown>
        <small *ngIf="form.get('{{morphName}}_type').invalid && form.get('{{morphName}}_type').touched" class="p-error">
          Type is required
        </small>
      </div>
      
      <!-- Related Entity Selection -->
      <div class="field" *ngIf="selectedType">
        <label for="{{morphName}}_id">{{morphLabel}}</label>
        <p-dropdown id="{{morphName}}_id" [options]="typeRelatedEntities" formControlName="{{morphName}}_id"
                   placeholder="Select a {{morphLabel}}" optionLabel="{{defaultDisplayField}}" optionValue="id"
                   [loading]="loadingRelatedEntities"></p-dropdown>
        <small *ngIf="form.get('{{morphName}}_id').invalid && form.get('{{morphName}}_id').touched" class="p-error">
          {{morphLabel}} is required
        </small>
      </div>
      
      <div class="field" *ngIf="!selectedType">
        <p class="text-muted">Please select a type first</p>
      </div>
      
      <!-- Form Actions -->
      <div class="dialog-footer">
        <button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" 
                (click)="hideModal()"></button>
        <button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" 
                type="submit" [disabled]="form.invalid"></button>
      </div>
    </form>
  </p-dialog>
  
  <!-- Delete Confirmation -->
  <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>
</div>