@model SceneEditViewModel
@{
    var completed = Model.ChecklistItems.Count(x => x.IsCompleted);
}

<form asp-controller="Scenes" asp-action="SaveSceneChecklist" 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 checklist</span>
                <strong>@completed / @Model.ChecklistItems.Count</strong>
            </div>

            @if (!Model.ChecklistItems.Any())
            {
                <p class="muted">No checklist items yet.</p>
            }
            else
            {
                <div class="scene-writer-editor-list">
                    @for (var index = 0; index < Model.ChecklistItems.Count; index++)
                    {
                        var item = Model.ChecklistItems[index];
                        <article class="scene-writer-checklist-row">
                            <input type="hidden" name="ChecklistItems[@index].SceneChecklistItemID" value="@item.SceneChecklistItemID" />
                            <input type="hidden" name="ChecklistItems[@index].SceneID" value="@Model.SceneID" />
                            <input type="hidden" name="ChecklistItems[@index].SortOrder" value="@item.SortOrder" />
                            <label class="scene-writer-checklist-complete">
                                <input type="checkbox" name="ChecklistItems[@index].IsCompleted" value="true" checked="@item.IsCompleted" />
                                <input type="hidden" name="ChecklistItems[@index].IsCompleted" value="false" />
                                <span>Done</span>
                            </label>
                            <div class="form-group">
                                <label class="visually-hidden" for="ChecklistItems_@(index)__ItemText">Checklist item</label>
                                <input class="form-control form-control-sm" id="ChecklistItems_@(index)__ItemText" name="ChecklistItems[@index].ItemText" value="@item.ItemText" />
                            </div>
                            <label class="scene-writer-remove">
                                <input type="checkbox" name="ChecklistItems[@index].Remove" value="true" />
                                <input type="hidden" name="ChecklistItems[@index].Remove" value="false" />
                                <span>Remove</span>
                            </label>
                        </article>
                    }
                </div>
            }
        </section>

        <section class="scene-writer-editor-section">
            <div class="scene-writer-editor-heading">
                <span>Add checklist item</span>
            </div>
            <div class="form-group">
                <label for="NewChecklistItem_ItemText">Item text</label>
                <input class="form-control form-control-sm" id="NewChecklistItem_ItemText" name="NewChecklistItem.ItemText" />
            </div>
        </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 checklist</button>
    </div>
</form>
