@model SceneEditViewModel

<form asp-controller="Scenes" asp-action="SaveSceneNotes" method="post" class="scene-inspector-editor-form" data-scene-editor-form>
    @Html.AntiForgeryToken()
    <input type="hidden" asp-for="SceneID" />

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

    <div class="scene-inspector-editor-fields">
        <section class="scene-writer-editor-section">
            <div class="scene-writer-editor-heading">
                <span>Current notes</span>
                <strong>@Model.Notes.Count</strong>
            </div>

            @if (!Model.Notes.Any())
            {
                <p class="muted">No working notes yet.</p>
            }
            else
            {
                <div class="scene-writer-editor-list">
                    @for (var index = 0; index < Model.Notes.Count; index++)
                    {
                        var note = Model.Notes[index];
                        <article class="scene-writer-editor-card">
                            <input type="hidden" name="Notes[@index].SceneNoteID" value="@note.SceneNoteID" />
                            <input type="hidden" name="Notes[@index].SceneID" value="@Model.SceneID" />
                            <input type="hidden" name="Notes[@index].SortOrder" value="@note.SortOrder" />
                            <div class="scene-writer-editor-card-header">
                                <div>
                                    <h4>@(string.IsNullOrWhiteSpace(note.NoteTitle) ? note.TypeName : note.NoteTitle)</h4>
                                    <p>@note.TypeName</p>
                                </div>
                                <label class="scene-writer-remove">
                                    <input type="checkbox" name="Notes[@index].Remove" value="true" />
                                    <input type="hidden" name="Notes[@index].Remove" value="false" />
                                    <span>Remove</span>
                                </label>
                            </div>

                            <div class="form-group">
                                <label for="Notes_@(index)__SceneNoteTypeID">Type</label>
                                <select class="form-control form-control-sm" id="Notes_@(index)__SceneNoteTypeID" name="Notes[@index].SceneNoteTypeID">
                                    @foreach (var option in Model.SceneNoteTypeOptions)
                                    {
                                        <option value="@option.Value" selected="@(option.Value == note.SceneNoteTypeID.ToString())">@option.Text</option>
                                    }
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="Notes_@(index)__NoteTitle">Title</label>
                                <input class="form-control form-control-sm" id="Notes_@(index)__NoteTitle" name="Notes[@index].NoteTitle" value="@note.NoteTitle" />
                            </div>

                            <div class="form-group">
                                <label for="Notes_@(index)__NoteText">Note text</label>
                                <textarea class="form-control form-control-sm" id="Notes_@(index)__NoteText" name="Notes[@index].NoteText" rows="3">@note.NoteText</textarea>
                            </div>

                            <div class="scene-inspector-editor-checks">
                                <label>
                                    <input type="checkbox" name="Notes[@index].IsPinned" value="true" checked="@note.IsPinned" />
                                    <input type="hidden" name="Notes[@index].IsPinned" value="false" />
                                    <span>Pinned</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="Notes[@index].IsResolved" value="true" checked="@note.IsResolved" />
                                    <input type="hidden" name="Notes[@index].IsResolved" value="false" />
                                    <span>Resolved</span>
                                </label>
                            </div>
                        </article>
                    }
                </div>
            }
        </section>

        <section class="scene-writer-editor-section">
            <div class="scene-writer-editor-heading">
                <span>Add note</span>
            </div>

            <div class="form-group">
                <label for="NewNote_SceneNoteTypeID">Type</label>
                <select class="form-control form-control-sm" id="NewNote_SceneNoteTypeID" name="NewNote.SceneNoteTypeID" asp-items="Model.SceneNoteTypeOptions"></select>
            </div>
            <div class="form-group">
                <label for="NewNote_NoteTitle">Title</label>
                <input class="form-control form-control-sm" id="NewNote_NoteTitle" name="NewNote.NoteTitle" />
            </div>
            <div class="form-group">
                <label for="NewNote_NoteText">Note text</label>
                <textarea class="form-control form-control-sm" id="NewNote_NoteText" name="NewNote.NoteText" rows="3"></textarea>
            </div>
            <label class="scene-writer-inline-check">
                <input type="checkbox" name="NewNote.IsPinned" value="true" />
                <input type="hidden" name="NewNote.IsPinned" value="false" />
                <span>Pinned</span>
            </label>
        </section>
    </div>

    <div class="scene-inspector-editor-footer">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-scene-editor-close>Cancel</button>
        <button type="submit" class="btn btn-sm btn-primary" data-scene-editor-save>Save notes</button>
    </div>
</form>