Asymmetrik/ngx-starter

<asy-modal
    title="Give Feedback"
    okText="Submit"
    [disableOk]="submitting() || !submitFeedbackForm.form.valid"
    (cancel)="cancel()"
    (ok)="submit()"
>
    <form #submitFeedbackForm="ngForm">
        <h2 class="pb-2">What's on your mind?</h2>

        <div class="form-check">
            <input
                class="form-check-input"
                id="type-option-1"
                name="type-option-radio"
                type="radio"
                value="general feedback"
                cdkFocusInitial
                required
                [(ngModel)]="feedback.type"
            />
            <label class="form-check-label mb-2" for="type-option-1"
                >Ask a question or make a comment</label
            >
        </div>

        @if (feedback.type === 'general feedback') {
            <ng-container *ngTemplateOutlet="textInput" />
        }

        <div class="form-check">
            <input
                class="form-check-input"
                id="type-option-2"
                name="type-option-radio"
                type="radio"
                value="feature request"
                required
                [(ngModel)]="feedback.type"
            />
            <label class="form-check-label mb-2" for="type-option-2">Suggest a new feature</label>
        </div>

        @if (feedback.type === 'feature request') {
            <ng-container *ngTemplateOutlet="textInput" />
        }

        <div class="form-check">
            <input
                class="form-check-input"
                id="type-option-3"
                name="type-option-radio"
                type="radio"
                value="bug report"
                required
                [(ngModel)]="feedback.type"
            />
            <label class="form-check-label mb-2" for="type-option-3">Report a bug/error</label>
        </div>

        @if (feedback.type === 'bug report') {
            <h3 class="pt-3 pb-2">What's the bug/error type?</h3>
            <div class="form-check">
                <input
                    class="form-check-input"
                    id="subtype-option-1"
                    name="subtype-option-radio"
                    type="radio"
                    value="Content or data"
                    required
                    [(ngModel)]="feedback.subType"
                />
                <label class="form-check-label mb-2" for="subtype-option-1">Content or data</label>
            </div>
            <div class="form-check">
                <input
                    class="form-check-input"
                    id="subtype-option-2"
                    name="subtype-option-radio"
                    type="radio"
                    value="Styling"
                    required
                    [(ngModel)]="feedback.subType"
                />
                <label class="form-check-label mb-2" for="subtype-option-2">Styling</label>
            </div>
            <div class="form-check">
                <input
                    class="form-check-input"
                    id="subtype-option-3"
                    name="subtype-option-radio"
                    type="radio"
                    value="Technical"
                    required
                    [(ngModel)]="feedback.subType"
                />
                <label class="form-check-label mb-2" for="subtype-option-3">Technical</label>
            </div>
            <div class="form-check">
                <input
                    class="form-check-input"
                    id="subtype-option-4"
                    name="subtype-option-radio"
                    type="radio"
                    value="Other"
                    required
                    [(ngModel)]="feedback.subType"
                />
                <label class="form-check-label mb-2" for="subtype-option-4">Other</label>
            </div>
            @if (feedback.subType === 'Other') {
                <div class="mb-2">
                    <input
                        class="form-control"
                        name="other-description"
                        required
                        [(ngModel)]="feedback.otherText"
                    />
                </div>
            }
            <div class="form-check">
                <input
                    class="form-check-input"
                    id="subtype-option-5"
                    name="subtype-option-radio"
                    type="radio"
                    value="Unsure"
                    required
                    [(ngModel)]="feedback.subType"
                />
                <label class="form-check-label mb-2" for="subtype-option-5">Unsure</label>
            </div>
            <h3 class="pt-2">What happened?</h3>
            <ng-container *ngTemplateOutlet="textInput" />
        }

        <ng-template #textInput>
            @if (classificationOptions().length > 0) {
                <div class="mb-3 pt-2">
                    <ng-select
                        name="classification"
                        bindLabel="level"
                        dropdownPosition="bottom"
                        placeholder="Select Classification"
                        required
                        [(ngModel)]="feedback.classification"
                        [clearable]="false"
                        [items]="classificationOptions()"
                    />
                </div>
            }

            <div class="mb-3">
                <textarea
                    class="form-control"
                    name="feedbackText"
                    placeholder="Enter Feedback"
                    required
                    [(ngModel)]="feedback.body"
                >
                </textarea>
            </div>
        </ng-template>
    </form>
</asy-modal>