<div class="page-spacing">
  <div>
    <h1 class="page-title">{{ 'synonyms.page-title' | translate }}</h1>
    <p class="page-description">{{ 'synonyms.page-description' | translate }}</p>
  </div>

  <form
    class="add-synonyms"
    [formGroup]="addSynonymForm"
    (ngSubmit)="addSynonym()">
    <pa-input
      formControlName="mainWord"
      class="main-word-input">
      {{ 'synonyms.add-form.main-word-label' | translate }}
    </pa-input>
    <pa-input
      formControlName="synonyms"
      class="synonyms-input">
      {{ 'synonyms.add-form.synonyms-label' | translate }}
    </pa-input>

    <pa-button
      kind="primary"
      type="submit"
      [disabled]="addSynonymForm.invalid">
      {{ 'generic.save' | translate }}
    </pa-button>
  </form>

  @if (hasSynonyms | async) {
    <div class="table-container">
      <pa-table
        border
        columns="1fr 3fr 120px">
        <pa-table-header>
          <pa-table-cell header>
            <span class="title-xxs">{{ 'synonyms.table.main-word' | translate }}</span>
          </pa-table-cell>
          <pa-table-cell header>
            <span class="title-xxs">{{ 'synonyms.table.synonyms' | translate }}</span>
          </pa-table-cell>
          <pa-table-cell header></pa-table-cell>
        </pa-table-header>

        @for (row of synonyms | async | keyvalue; track row) {
          <pa-table-row
            hoverable
            [class.pa-selected]="editing === row.key"
            (mouseenter)="hoverOn = row.key"
            (mouseleave)="hoverOn = ''">
            <pa-table-cell>
              <span class="body-m">{{ row.key }}</span>
            </pa-table-cell>
            <pa-table-cell
              clickable
              (click)="editing = row.key">
              @if (editing !== row.key) {
                <span
                  class="body-m"
                  >
                  {{ row.value.join(', ') }}
                </span>
              }
              @if (editing === row.key) {
                <input
                  paFocusable
                  class="edit-synonym-input"
                  [value]="row.value.join(', ')"
                  (keyup.enter)="editSynonym(row.key, $event)" />
              }
            </pa-table-cell>
            <pa-table-cell-menu>
              <div
                class="action-buttons-container"
                [class.visible]="hoverOn === row.key || editing === row.key">
                <pa-button
                  icon="edit"
                  aspect="basic"
                  [active]="editing === row.key"
                  (click)="editing = editing === row.key ? '' : row.key">
                  {{ 'synonyms.table.edit-synonym' | translate }}
                </pa-button>
                <pa-button
                  icon="trash"
                  kind="destructive"
                  aspect="basic"
                  (click)="deleteEntry(row.key, row.value)">
                  {{ 'synonyms.table.delete-synonym' | translate }}
                </pa-button>
              </div>
            </pa-table-cell-menu>
          </pa-table-row>
        }
      </pa-table>
    </div>
  }
</div>
