<div class="dialog-overlay" (click)="onOverlayClick($event)">
  <div class="dialog">
    <div class="dialog-header">
      <h2>{{ isEditing ? ('readerCbx.noteDialog.editNote' | transloco) : ('readerCbx.noteDialog.addNote' | transloco) }}</h2>
      <button class="close-btn" (click)="onCancel()">
        <app-reader-icon name="close" [size]="18"></app-reader-icon>
      </button>
    </div>

    <div class="dialog-body">
      <div class="page-info-section">
        <span class="section-label">{{ 'readerCbx.noteDialog.pageLabel' | transloco }}</span>
        <p class="page-info">{{ 'readerCbx.noteDialog.pageInfo' | transloco: { pageNumber: data?.pageNumber } }}</p>
      </div>

      <div class="note-section">
        <label class="section-label" for="noteContent">{{ 'readerCbx.noteDialog.yourNote' | transloco }}</label>
        <textarea
          id="noteContent"
          class="note-input"
          [(ngModel)]="noteContent"
          [placeholder]="'readerCbx.noteDialog.placeholder' | transloco"
          rows="6"
          autofocus
        ></textarea>
      </div>

      <div class="color-section">
        <span class="section-label">{{ 'readerCbx.noteDialog.noteColor' | transloco }}</span>
        <div class="color-buttons">
          @for (color of noteColors; track color.value) {
            <button
              class="color-btn"
              [style.--color]="color.value"
              [class.selected]="selectedColor === color.value"
              [title]="color.label"
              (click)="selectColor(color.value)">
            </button>
          }
        </div>
      </div>
    </div>

    <div class="dialog-footer">
      <button class="btn btn-secondary" (click)="onCancel()">{{ 'common.cancel' | transloco }}</button>
      <button class="btn btn-primary" (click)="onSave()" [disabled]="!noteContent.trim()">{{ isEditing ? ('readerCbx.noteDialog.updateNote' | transloco) : ('readerCbx.noteDialog.saveNote' | transloco) }}</button>
    </div>
  </div>
</div>
