@if (homePage()) {
<section class="editor-section-card">
  <h2>{{ 'builder.homepage' | translate }}</h2>
  <div cdkDropList class="sortable-list" (cdkDropListDropped)="drop($event)">
    @for (section of sections(); track section.id) {
      <div class="sortable-item" cdkDrag>
        <div class="editor-grid four compact">
          <strong>{{ section.id }}</strong>
          <label><span>{{ 'builder.visible' | translate }}</span><input type="checkbox" [checked]="section.visible !== false" (change)="updateSection(section.id, 'visible', $any($event.target).checked)" /></label>
          <label><span>{{ 'builder.layoutLabel' | translate }}</span><input type="text" [ngModel]="section.layout?.strategy || ''" (ngModelChange)="updateLayout(section.id, 'strategy', $event)" /></label>
          <label><span>{{ 'builder.columns' | translate }}</span><input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" /></label>
        </div>
      </div>
    }
  </div>
</section>
}