@model SceneEditViewModel

<div class="scene-inspector-editor-form">
    <div class="scene-inspector-editor-fields">
        <section class="scene-structure-editor-section">
            <div class="scene-structure-editor-heading">
                <span>Knowledge changes</span>
                <strong>@Model.CharacterKnowledge.Count</strong>
            </div>

            @if (!Model.CharacterKnowledge.Any())
            {
                <p class="muted">No knowledge changes are recorded for this scene yet.</p>
            }
            else
            {
                <div class="scene-structure-editor-list">
                    @foreach (var item in Model.CharacterKnowledge)
                    {
                        <article class="scene-structure-editor-card">
                            <div class="scene-structure-card-header">
                                <div>
                                    <h4>@item.CharacterName</h4>
                                    <p>@(item.AssetName ?? item.ThreadTitle ?? "Scene knowledge")</p>
                                </div>
                                <span class="scene-structure-marker">@item.KnowledgeStateName</span>
                            </div>

                            @if (!string.IsNullOrWhiteSpace(item.Description))
                            {
                                <p>@item.Description</p>
                            }

                            <form asp-controller="Scenes" asp-action="UpdateCharacterKnowledge" method="post" class="scene-structure-editor-form" data-scene-editor-form>
                                @Html.AntiForgeryToken()
                                <input type="hidden" name="CharacterKnowledgeID" value="@item.CharacterKnowledgeID" />
                                <input type="hidden" name="SceneID" value="@Model.SceneID" />
                                <input type="hidden" name="SourceEventID" value="@item.SourceEventID" />
                                <input type="hidden" name="ReturnProjectID" value="@Model.ReturnProjectID" />
                                <input type="hidden" name="ReturnBookID" value="@Model.ReturnBookID" />

                                <div class="scene-inspector-editor-error" data-scene-editor-error hidden></div>

                                <div class="form-group">
                                    <label for="Knowledge_@(item.CharacterKnowledgeID)__CharacterID">Character</label>
                                    <select class="form-control form-control-sm" id="Knowledge_@(item.CharacterKnowledgeID)__CharacterID" name="CharacterID">
                                        @foreach (var option in Model.CharacterOptions)
                                        {
                                            <option value="@option.Value" selected="@(option.Value == item.CharacterID.ToString())">@option.Text</option>
                                        }
                                    </select>
                                </div>

                                <div class="scene-inspector-editor-grid">
                                    <div class="form-group">
                                        <label for="Knowledge_@(item.CharacterKnowledgeID)__StoryAssetID">Related asset</label>
                                        <select class="form-control form-control-sm" id="Knowledge_@(item.CharacterKnowledgeID)__StoryAssetID" name="StoryAssetID">
                                            <option value="">No asset</option>
                                            @foreach (var option in Model.AssetOptions)
                                            {
                                                <option value="@option.Value" selected="@(item.StoryAssetID?.ToString() == option.Value)">@option.Text</option>
                                            }
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="Knowledge_@(item.CharacterKnowledgeID)__PlotThreadID">Related plot thread</label>
                                        <select class="form-control form-control-sm" id="Knowledge_@(item.CharacterKnowledgeID)__PlotThreadID" name="PlotThreadID">
                                            <option value="">No plot thread</option>
                                            @foreach (var option in Model.PlotThreadOptions)
                                            {
                                                <option value="@option.Value" selected="@(item.PlotThreadID?.ToString() == option.Value)">@option.Text</option>
                                            }
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="Knowledge_@(item.CharacterKnowledgeID)__KnowledgeStateID">Knowledge state</label>
                                    <select class="form-control form-control-sm" id="Knowledge_@(item.CharacterKnowledgeID)__KnowledgeStateID" name="KnowledgeStateID">
                                        @foreach (var option in Model.KnowledgeStateOptions)
                                        {
                                            <option value="@option.Value" selected="@(option.Value == item.KnowledgeStateID.ToString())">@option.Text</option>
                                        }
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="Knowledge_@(item.CharacterKnowledgeID)__Description">Notes</label>
                                    <textarea class="form-control form-control-sm" id="Knowledge_@(item.CharacterKnowledgeID)__Description" name="Description" rows="3">@item.Description</textarea>
                                </div>

                                <div class="scene-structure-action-row">
                                    <button class="btn btn-sm btn-primary" type="submit" data-scene-editor-save>Save knowledge</button>
                                </div>
                            </form>

                            <form asp-controller="Scenes" asp-action="DeleteCharacterKnowledge" method="post" class="scene-structure-delete-form" data-scene-editor-form>
                                @Html.AntiForgeryToken()
                                <input type="hidden" name="id" value="@item.CharacterKnowledgeID" />
                                <input type="hidden" name="sceneId" value="@Model.SceneID" />
                                <input type="hidden" name="projectId" value="@Model.ReturnProjectID" />
                                <input type="hidden" name="bookId" value="@Model.ReturnBookID" />
                                <div class="scene-inspector-editor-error" data-scene-editor-error hidden></div>
                                <button class="btn btn-sm btn-outline-danger" type="submit" data-scene-editor-save>Remove knowledge</button>
                            </form>
                        </article>
                    }
                </div>
            }
        </section>

        <section class="scene-structure-editor-section">
            <div class="scene-structure-editor-heading">
                <span>Add knowledge change</span>
            </div>

            <form asp-controller="Scenes" asp-action="AddCharacterKnowledge" method="post" class="scene-structure-editor-card scene-structure-editor-form" data-scene-editor-form>
                @Html.AntiForgeryToken()
                <input type="hidden" name="SceneID" value="@Model.SceneID" />
                <input type="hidden" name="ReturnProjectID" value="@Model.ReturnProjectID" />
                <input type="hidden" name="ReturnBookID" value="@Model.ReturnBookID" />

                <div class="scene-inspector-editor-error" data-scene-editor-error hidden></div>

                <div class="form-group">
                    <label for="KnowledgeCharacterID">Character</label>
                    <select class="form-control form-control-sm" id="KnowledgeCharacterID" name="CharacterID" asp-items="Model.CharacterOptions"></select>
                </div>

                <div class="scene-inspector-editor-grid">
                    <div class="form-group">
                        <label for="KnowledgeStoryAssetID">Related asset</label>
                        <select class="form-control form-control-sm" id="KnowledgeStoryAssetID" name="StoryAssetID" asp-items="Model.AssetOptions">
                            <option value="">No asset</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="KnowledgePlotThreadID">Related plot thread</label>
                        <select class="form-control form-control-sm" id="KnowledgePlotThreadID" name="PlotThreadID" asp-items="Model.PlotThreadOptions">
                            <option value="">No plot thread</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label for="KnowledgeStateID">Knowledge state</label>
                    <select class="form-control form-control-sm" id="KnowledgeStateID" name="KnowledgeStateID" asp-items="Model.KnowledgeStateOptions"></select>
                </div>

                <div class="form-group">
                    <label for="KnowledgeDescription">Notes</label>
                    <textarea class="form-control form-control-sm" id="KnowledgeDescription" name="Description" rows="3" placeholder="Reveal or discovery context"></textarea>
                </div>

                <div class="scene-structure-action-row">
                    <button class="btn btn-sm btn-primary" type="submit" data-scene-editor-save>Add knowledge</button>
                </div>
            </form>
        </section>
    </div>

    <div class="scene-inspector-editor-footer">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-scene-editor-close>Close</button>
    </div>
</div>