<div class="modal-backdrop" (click)="onCancel()">
  <div class="modal" (click)="$event.stopPropagation()">

    <div class="modal-header">
      <h2>{{ 'loreCreate.title' | translate }}</h2>
      <button class="btn-close" (click)="onCancel()">
        <lucide-icon [img]="X" [size]="18"></lucide-icon>
      </button>
    </div>

    <form [formGroup]="form" (ngSubmit)="submit()">

      <div class="field">
        <label for="lore-name">{{ 'loreCreate.nameLabel' | translate }}</label>
        <input
          id="lore-name"
          type="text"
          formControlName="name"
          [placeholder]="'loreCreate.namePlaceholder' | translate"
          [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
        />
      </div>

      <div class="field">
        <label for="lore-description">{{ 'common.description' | translate }}</label>
        <textarea
          id="lore-description"
          formControlName="description"
          [placeholder]="'loreCreate.descriptionPlaceholder' | translate"
          rows="5"
        ></textarea>
      </div>

      <div class="info-box">
        <p [innerHTML]="'loreCreate.infoIntro' | translate"></p>
        <ul>
          <li>{{ 'loreCreate.infoNpc' | translate }}</li>
          <li>{{ 'loreCreate.infoPlace' | translate }}</li>
          <li>{{ 'loreCreate.infoFaction' | translate }}</li>
          <li>{{ 'loreCreate.infoItem' | translate }}</li>
        </ul>
        <p class="info-footer">{{ 'loreCreate.infoFooter' | translate }}</p>
      </div>

      <div class="modal-actions">
        <button type="submit" class="btn-primary" [disabled]="form.invalid">
          <lucide-icon [img]="BookCopy" [size]="16"></lucide-icon>
          {{ 'loreCreate.submit' | translate }}
        </button>
        <button type="button" class="btn-secondary" (click)="onCancel()">{{ 'common.cancel' | translate }}</button>
      </div>

    </form>

  </div>
</div>
