@if (listResource.isLoading()) {
  <app-skeleton-loader type="table" [count]="5" />
} @else if (listResource.error()) {
  <app-error-state (retryAction)="listResource.reload()" />
} @else {
  <form class="flex-col">
    <div class="row-container">
      <mat-form-field class="flex-auto">
        <mat-label>Header / Footer</mat-label>
        <mat-select [formField]="form.id" (selectionChange)="show($event)">
          @for (s of list(); track s) {
            <mat-option [value]="s.id">
              {{ s.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <div class="row-container">
      <mat-form-field class="flex-auto">
        <mat-label>Text</mat-label>
        <textarea matInput matAutosizeMinRows="5" [formField]="form.text"></textarea>
      </mat-form-field>
    </div>
  </form>
  <div class="row-container">
    <button type="button" mat-raised-button color="primary" (click)="save()">Save</button>
  </div>
}