<div class="toolbar">
    <button class="toolbar-btn back-btn" (click)="onBack()">&#8593; Goals</button>
    <span class="toolbar-title">Goal Detail</span>
    <span class="spacer"></span>
</div>

@if (loaded()) {
<div class="detail-card">
    <div class="card-header">
        <span class="card-title">Goal: {{ category }}</span>
        @if (targetCompletionDate) {
            <span class="card-title">Target: {{ targetCompletionDate | date:'mediumDate' }}</span>
        } @else {
            <span class="card-title">No target date</span>
        }
    </div>

    <div class="card-body">
        <div class="field">
            <label class="field-label" for="category">Category</label>
            <input id="category" class="field-input" type="text" [(ngModel)]="category" />
        </div>

        <div class="field">
            <label class="field-label" for="baseline">Baseline</label>
            <textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
                placeholder="Enter baseline..."></textarea>
        </div>
        <div class="field">
            <label class="field-label" for="description">Goal</label>
            <textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
                placeholder="Enter goal..."></textarea>
        </div>

        <div class="field">
            <label class="field-label" for="targetCompletionDate">Target Completion Date</label>
            <input id="targetCompletionDate" class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
        </div>

        @if (closeDate !== null) {
        <div class="close-section">
            <div class="field">
                <label class="field-label" for="closeDate">Close Date</label>
                <input id="closeDate" class="field-input" type="date" [(ngModel)]="closeDate" />
            </div>
            <div class="field field-row">
                <label class="field-label" for="achieved">Achieved</label>
                <input id="achieved" type="checkbox" [ngModel]="achieved ?? false" (ngModelChange)="achieved = $event" />
            </div>
            @if (achieved === false) {
            <div class="field">
                <label class="field-label" for="closeNotes">Close Notes <span class="required">*</span></label>
                <textarea id="closeNotes" class="field-input field-textarea" [(ngModel)]="closeNotes" rows="3"
                    placeholder="Explain why the goal was not achieved..." required></textarea>
            </div>
            }
        </div>
        }

        <div class="actions">
            <button class="toolbar-btn" (click)="onCancel()" [disabled]="!hasChanges()">Cancel</button>
            <button class="toolbar-btn save-btn" (click)="onSave()" [disabled]="!hasChanges() || saving()">
                {{ saving() ? 'Saving...' : 'Save' }}
            </button>
        </div>
    </div>

    <div class="card-footer">
        <button class="footer-btn btn-green" (click)="onProgressEvents()">Progress Events</button>
        <button class="footer-btn btn-blue" (click)="onBenchmarks()">Benchmarks</button>
    </div>
</div>
}

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

@if (successMessage()) {
<p class="success">{{ successMessage() }}</p>
}