@model SceneEditViewModel
@{
    var dependencyCount = Model.DependenciesThisSceneNeeds.Count + Model.DependenciesNeedingThisScene.Count;
}

<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>Dependencies</span>
                <strong>@dependencyCount</strong>
            </div>

            <div class="scene-structure-dependency-columns">
                <div>
                    <p class="eyebrow">This scene depends on</p>
                    @if (!Model.DependenciesThisSceneNeeds.Any())
                    {
                        <p class="muted">No dependencies yet.</p>
                    }
                    else
                    {
                        <div class="scene-structure-editor-list">
                            @foreach (var dependency in Model.DependenciesThisSceneNeeds)
                            {
                                <article class="scene-structure-editor-card">
                                    <div class="scene-structure-card-header">
                                        <div>
                                            <h4>Ch @dependency.SourceChapterNumber, Scene @dependency.SourceSceneNumber</h4>
                                            <p>@dependency.SourceSceneTitle</p>
                                        </div>
                                    </div>
                                    <p class="muted">@dependency.SceneDependencyTypeName @(dependency.IsHardDependency ? "/ hard" : "/ soft")</p>
                                    @if (!string.IsNullOrWhiteSpace(dependency.Description))
                                    {
                                        <p>@dependency.Description</p>
                                    }
                                    <form asp-controller="Scenes" asp-action="DeleteSceneDependency" method="post" class="scene-structure-delete-form" data-scene-editor-form>
                                        @Html.AntiForgeryToken()
                                        <input type="hidden" name="id" value="@dependency.SceneDependencyID" />
                                        <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 dependency</button>
                                    </form>
                                </article>
                            }
                        </div>
                    }
                </div>

                <div>
                    <p class="eyebrow">Scenes depending on this</p>
                    @if (!Model.DependenciesNeedingThisScene.Any())
                    {
                        <p class="muted">No dependent scenes yet.</p>
                    }
                    else
                    {
                        <div class="scene-structure-editor-list">
                            @foreach (var dependency in Model.DependenciesNeedingThisScene)
                            {
                                <article class="scene-structure-editor-card">
                                    <div class="scene-structure-card-header">
                                        <div>
                                            <h4>Ch @dependency.TargetChapterNumber, Scene @dependency.TargetSceneNumber</h4>
                                            <p>@dependency.TargetSceneTitle</p>
                                        </div>
                                    </div>
                                    <p class="muted">@dependency.SceneDependencyTypeName @(dependency.IsHardDependency ? "/ hard" : "/ soft")</p>
                                    @if (!string.IsNullOrWhiteSpace(dependency.Description))
                                    {
                                        <p>@dependency.Description</p>
                                    }
                                    <form asp-controller="Scenes" asp-action="DeleteSceneDependency" method="post" class="scene-structure-delete-form" data-scene-editor-form>
                                        @Html.AntiForgeryToken()
                                        <input type="hidden" name="id" value="@dependency.SceneDependencyID" />
                                        <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 dependency</button>
                                    </form>
                                </article>
                            }
                        </div>
                    }
                </div>
            </div>
        </section>

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

            <form asp-controller="Scenes" asp-action="AddSceneDependency" method="post" class="scene-structure-editor-card scene-structure-editor-form" data-scene-editor-form>
                @Html.AntiForgeryToken()
                <input type="hidden" name="ProjectID" value="@Model.ReturnProjectID" />
                <input type="hidden" name="CurrentSceneID" 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="DependencyDirection">Plain English</label>
                    <select class="form-control form-control-sm" id="DependencyDirection" name="Direction">
                        <option value="CurrentDependsOnRelated">This scene depends on another scene</option>
                        <option value="RelatedDependsOnCurrent">Another scene depends on this scene</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="RelatedSceneID">Related scene</label>
                    <select class="form-control form-control-sm" id="RelatedSceneID" name="RelatedSceneID" asp-items="Model.SceneOptions"></select>
                </div>

                <div class="scene-inspector-editor-grid">
                    <div class="form-group">
                        <label for="SceneDependencyTypeID">Dependency type</label>
                        <select class="form-control form-control-sm" id="SceneDependencyTypeID" name="SceneDependencyTypeID" asp-items="Model.SceneDependencyTypeOptions"></select>
                    </div>
                    <label class="scene-structure-inline-check">
                        <input type="checkbox" name="IsHardDependency" value="true" />
                        <input type="hidden" name="IsHardDependency" value="false" />
                        <span>Hard dependency</span>
                    </label>
                </div>

                <div class="form-group">
                    <label for="Description">Description</label>
                    <textarea class="form-control form-control-sm" id="Description" name="Description" rows="2" placeholder="Why this order matters"></textarea>
                </div>

                <div class="scene-structure-action-row">
                    <button class="btn btn-sm btn-primary" type="submit" data-scene-editor-save>Add dependency</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>