<div class="html-editor">
  <div class="html-editor-toolbar" role="toolbar">
    @for (group of toolbarGroups; track $index) {
      <div class="html-editor-toolbar__group">
        @for (item of group; track item.id) {
          <button
            type="button"
            class="html-editor-toolbar__btn"
            [class.html-editor-toolbar__btn--bold]="item.id === 'bold'"
            [class.html-editor-toolbar__btn--italic]="item.id === 'italic'"
            [class.html-editor-toolbar__btn--underline]="item.id === 'underline'"
            [title]="item.titleKey ? (item.titleKey | translate) : item.label"
            [attr.aria-label]="item.titleKey ? (item.titleKey | translate) : item.label"
            (click)="runCommand(item)"
          >
            @if (item.icon) {
              <app-icon [name]="item.icon" [size]="16" />
            } @else {
              {{ item.label }}
            }
          </button>
        }
      </div>
    }
    <div class="html-editor-toolbar__group html-editor-toolbar__group--end">
      <button type="button" class="html-editor-toolbar__btn html-editor-toolbar__btn--wide" (click)="toggleCode()">{{ (showCode() ? 'builder.htmlEditorPreview' : 'builder.htmlEditorCode') | translate }}</button>
    </div>
  </div>

  @if (showCode()) {
    <app-code-editor
      language="html"
      [rows]="10"
      [invalid]="!!codeError()"
      [value]="codeValue()"
      (valueChange)="updateCode($event)"
    />
    @if (codeError()) {
      <p class="html-editor-code-error">{{ codeError() }}</p>
    }
  }

  <div
    #surface
    class="html-editor-surface"
    [hidden]="showCode()"
    contenteditable="true"
    role="textbox"
    aria-multiline="true"
    [attr.aria-label]="'builder.htmlEditorCode' | translate"
    (input)="onInput()"
  ></div>
</div>
