<div class="theme-grid-editor rounded-lg border border-border bg-card/40 p-3">
  <div class="mb-3 flex items-center justify-between gap-3 px-1">
    <div>
      <p class="text-sm font-semibold text-foreground">{{ container().label }}</p>
      <p class="text-xs text-muted-foreground">{{ container().description }}</p>
    </div>

    <div class="rounded-md bg-secondary px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
      {{ container().columns }} cols x {{ container().rows }} rows
    </div>
  </div>

  <div
    #canvasRef
    class="theme-grid-editor__frame relative overflow-hidden rounded-lg border border-border/80"
    [ngStyle]="frameStyle()"
  >
    <div
      class="theme-grid-editor__grid"
      [ngStyle]="frameStyle()"
    >
      @for (cell of gridCells(); track cell) {
        <div class="theme-grid-editor__cell"></div>
      }
    </div>

    @for (item of items(); track item.key) {
      <div
        class="theme-grid-editor__item"
        [class.theme-grid-editor__item--selected]="selectedKey() === item.key"
        [class.theme-grid-editor__item--disabled]="disabled()"
        [ngStyle]="itemStyle(item)"
        (click)="selectItem(item.key)"
        (keydown.enter)="selectItem(item.key)"
        (keydown.space)="selectItem(item.key)"
        tabindex="0"
        role="button"
        [attr.aria-label]="'Select ' + item.label"
      >
        <div
          class="theme-grid-editor__item-body"
          (pointerdown)="startMove($event, item)"
        >
          <div class="flex items-start justify-between gap-2">
            <div class="min-w-0">
              <p class="truncate text-sm font-semibold text-foreground">{{ item.label }}</p>
              <p class="mt-1 line-clamp-2 text-[11px] leading-4 text-muted-foreground">{{ item.description }}</p>
            </div>

            <div class="rounded-md bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
              {{ item.grid.x }},{{ item.grid.y }} · {{ item.grid.w }}x{{ item.grid.h }}
            </div>
          </div>
        </div>

        <button
          type="button"
          class="theme-grid-editor__handle"
          (pointerdown)="startResize($event, item)"
          aria-label="Resize {{ item.label }}"
        ></button>
      </div>
    }

    @if (disabled()) {
      <div
        class="theme-grid-editor__disabled absolute inset-0 flex items-center justify-center rounded-lg bg-background/75 px-6 text-center text-sm text-muted-foreground backdrop-blur-sm"
      >
        Fix JSON validation errors to re-enable the grid editor.
      </div>
    }
  </div>
</div>
