@model FeatureRequestCreateViewModel
@{
    ViewData["Title"] = "Submit Feature Request";
}

<div class="page-heading compact">
    <div>
        <p class="eyebrow">Feedback</p>
        <h1>Submit Feature Request</h1>
        <p class="lead-text">Tell us what would make PlotDirector more useful for the way you write. The most helpful suggestions explain the problem you're trying to solve, not just the button you want added.</p>
    </div>
</div>

<nav class="mb-3" aria-label="Breadcrumb">
    <a asp-action="Index">Feature Requests</a>
    <span class="muted"> / Submit</span>
</nav>

<section class="edit-panel">
    <form asp-action="Create" method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="mb-3">
            <label class="form-label" asp-for="Title"></label>
            <input class="form-control" asp-for="Title" />
            <span class="text-danger" asp-validation-for="Title"></span>
        </div>
        <div class="mb-3">
            <label class="form-label" asp-for="Description"></label>
            <textarea class="form-control" asp-for="Description" rows="8"></textarea>
            <span class="text-danger" asp-validation-for="Description"></span>
        </div>
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label" asp-for="AppArea"></label>
                <select class="form-select" asp-for="AppArea">
                    <option value="">Choose an area</option>
                    @foreach (var appArea in Model.AppAreas)
                    {
                        <option value="@appArea">@appArea</option>
                    }
                </select>
                <span class="text-danger" asp-validation-for="AppArea"></span>
            </div>
            <div class="col-md-6">
                <label class="form-label" asp-for="Importance"></label>
                <select class="form-select" asp-for="Importance">
                    <option value="">Choose importance</option>
                    @foreach (var importance in Model.ImportanceOptions)
                    {
                        <option value="@importance">@importance</option>
                    }
                </select>
                <span class="text-danger" asp-validation-for="Importance"></span>
            </div>
        </div>
        <div class="button-row mt-4">
            <button class="btn btn-primary" type="submit">Submit Feature Request</button>
            <a class="btn btn-outline-secondary" asp-action="Index">Cancel</a>
        </div>
    </form>
</section>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}