<app-modal-shell [title]="modalTitle" (closed)="closed.emit()">
    @if (!isEditMode) {
    <div class="ai-suggest-row">
        <button class="btn-ai" (click)="onGetRecommendation()" [disabled]="recommending() || saving()">
            {{ recommending() ? 'Generating...' : '✦ Suggest with AI' }}
        </button>
        @if (recommendError()) {
        <p class="recommend-error">{{ recommendError() }}</p>
        }
    </div>
    }

    <div class="field">
        <label class="field-label">Benchmark</label>
        <textarea class="field-input field-textarea" [(ngModel)]="benchmarkText"
            placeholder="Enter benchmark text..."></textarea>
    </div>
    <div class="field">
        <label class="field-label">Short Name</label>
        <input class="field-input" type="text" [(ngModel)]="shortName" maxlength="50"
            placeholder="Optional" />
    </div>

    @if (errorMessage()) {
    <p class="error">{{ errorMessage() }}</p>
    }

    <div class="modal-actions">
        <button class="btn-secondary" (click)="closed.emit()">Cancel</button>
        <button class="btn-primary" (click)="onSave()" [disabled]="saving() || recommending() || !benchmarkText.trim()">
            {{ saving() ? 'Saving...' : submitLabel }}
        </button>
    </div>
</app-modal-shell>
