@model StoryIntelligenceAuthorPlotContextViewModel
@{
    ViewData["Title"] = "Help PlotDirector understand your story";
    var descriptions = Model.Descriptions.Count >= 3
        ? Model.Descriptions.ToList()
        : Model.Descriptions.Concat(Enumerable.Repeat(string.Empty, 3 - Model.Descriptions.Count)).ToList();
}

<section class="onboarding-shell" aria-labelledby="story-plot-context-title">
    <div class="onboarding-panel onboarding-review-panel">
        <div class="onboarding-copy">
            <p class="eyebrow">Story Intelligence</p>
            <h1 id="story-plot-context-title">Help PlotDirector understand your story</h1>
            <p>Plot lines are the major stories, mysteries, conflicts and character arcs that develop through your book or series.</p>
            <p>If you already know some important plot lines, you can tell PlotDirector about them here. A sentence or two is enough. PlotDirector will still analyse the manuscript and try to discover other plot lines for you.</p>
        </div>

        <form asp-action="StartStoryIntelligenceWithPlotContext" method="post" class="story-plot-context-form" data-plot-context-form>
            <input type="hidden" name="ProjectID" value="@Model.ProjectID" />
            <input type="hidden" name="BookID" value="@Model.BookID" />

            <div class="story-plot-context-list" data-plot-context-list>
                @for (var i = 0; i < descriptions.Count; i++)
                {
                    <div class="story-plot-context-item">
                        <label for="plot-seed-@i">Plot line @((i + 1).ToString("N0"))</label>
                        <textarea id="plot-seed-@i"
                                  class="form-control"
                                  name="PlotSeeds[@i]"
                                  rows="4"
                                  maxlength="4000"
                                  placeholder="Example: A chance meeting between two characters appears accidental, but was secretly arranged by another character to manipulate one of them. The manipulation continues throughout the story.">@descriptions[i]</textarea>
                    </div>
                }
            </div>

            <button class="btn btn-outline-primary btn-sm" type="button" data-add-plot-context>+ Add another plot line</button>

            <div class="onboarding-actions">
                <button class="btn btn-primary" type="submit">Analyse my book</button>
                <a class="btn btn-outline-secondary" asp-controller="Books" asp-action="Details" asp-route-id="@Model.BookID">Not now</a>
            </div>
        </form>
    </div>
</section>

@section Scripts {
    <script>
        (() => {
            const list = document.querySelector("[data-plot-context-list]");
            const add = document.querySelector("[data-add-plot-context]");
            if (!list || !add) {
                return;
            }

            add.addEventListener("click", () => {
                const index = list.querySelectorAll(".story-plot-context-item").length;
                const wrapper = document.createElement("div");
                wrapper.className = "story-plot-context-item";
                wrapper.innerHTML = `
                    <label for="plot-seed-${index}">Plot line ${index + 1}</label>
                    <textarea id="plot-seed-${index}" class="form-control" name="PlotSeeds[${index}]" rows="4" maxlength="4000"></textarea>
                `;
                list.appendChild(wrapper);
                wrapper.querySelector("textarea")?.focus();
            });
        })();
    </script>
}