@if (type() === 'form') {
  <!--
    `formGroup` es opcional (ver el comentario en expansion-panel.component.ts):
    si no se pasa, `formGroup() ?? emptyFormGroup` da un FormGroup vacío para
    que [formGroup] nunca reciba `undefined`. Mantener un único <form> con un
    único juego de <ng-content> evita duplicar los selectores en dos ramas
    @if/@else, que en Angular hace que solo una de las dos copias reciba el
    contenido proyectado.
  -->
  <form [formGroup]="formGroup() ?? emptyFormGroup">
    <!-- Top -->
    <header>
      <div>
        <h2 m medium>{{ title() }}</h2>
        @if (subtitle()) {
          <h4 pi-grey light xs>{{ subtitle() }}</h4>
        }
      </div>
      <aside>
        <ng-content select="pi-panel-top-content"></ng-content>
        <pi-divider
          direction="vertical"
          color="grey"
          height="medium"
        ></pi-divider>
        <pi-icon-button
          appearance="ghost"
          color="black"
          icon="chevron-forward"
          size="x-small"
          [hasPadding]="false"
          [isResponsive]="false"
          (execute)="onEdit()"
          [class]="isCollapsed() ? 'is-collapsed' : 'is-expanded'"
          [text]="'common.edit' | translate"
        ></pi-icon-button>
      </aside>
    </header>
    <!-- Center | Summary -->
    <ng-content select="pi-panel-center-content"></ng-content>
    <!-- Bottom & Expansion -->
    <section [class]="isCollapsed() ? 'is-collapsed' : 'is-expanded'">
      <ng-content select="pi-panel-expandable-content"></ng-content>
    </section>
  </form>
} @else {
  <!-- Top -->
  <header class="pi-panel-content pi-panel-content__top">
    <ng-container *ngTemplateOutlet="topContentRef()"></ng-container>
    <aside>
      <pi-divider
        direction="vertical"
        color="grey"
        height="medium"
      ></pi-divider>
      <pi-icon
        (click)="toggle()"
        icon="chevron-down"
        [class.is-collapsed]="isCollapsed()"
        size="small"
      ></pi-icon>
    </aside>
  </header>
  <!-- Center -->
  <ng-container *ngTemplateOutlet="centerContentRef()"></ng-container>
  <!-- Bottom & Expansion -->
  <section
    [class]="isCollapsed() ? 'is-collapsed' : 'is-expanded'"
    class="pi-panel-content pi-panel-content__expandable"
  >
    <ng-container *ngTemplateOutlet="expandableContentRef()"> </ng-container>
  </section>
}

<!-- Custom Panel -->