@model SceneEditViewModel
@{
    var currentCharacterIds = Model.SceneCharacters.Select(x => x.CharacterID).ToHashSet();
    var availableCharacters = Model.CharacterOptions
        .Where(x => int.TryParse(x.Value, out var id) && !currentCharacterIds.Contains(id))
        .ToList();
}

<form asp-controller="Scenes" asp-action="SaveSceneCharacters" 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">
        <fieldset class="scene-inspector-editor-fieldset">
            <legend>POV character</legend>
            <div class="scene-character-pov-options">
                <label>
                    <input type="radio" name="POVCharacterID" value="" checked="@(!Model.POVCharacterID.HasValue)" />
                    <span>No POV</span>
                </label>
                @foreach (var character in Model.SceneCharacters)
                {
                    <label>
                        <input type="radio" name="POVCharacterID" value="@character.CharacterID" checked="@(Model.POVCharacterID == character.CharacterID)" />
                        <span>@character.CharacterName</span>
                    </label>
                }
            </div>
        </fieldset>

        <section class="scene-character-editor-section">
            <div class="scene-character-editor-heading">
                <span>Current characters</span>
                <strong>@Model.SceneCharacters.Count</strong>
            </div>

            @if (!Model.SceneCharacters.Any())
            {
                <p class="muted">No characters have been added to this scene.</p>
            }
            else
            {
                <div class="scene-character-editor-list">
                    @for (var index = 0; index < Model.SceneCharacters.Count; index++)
                    {
                        var character = Model.SceneCharacters[index];
                        <article class="scene-character-editor-card">
                            <input type="hidden" name="Characters[@index].SceneCharacterID" value="@character.SceneCharacterID" />
                            <input type="hidden" name="Characters[@index].SceneID" value="@Model.SceneID" />
                            <input type="hidden" name="Characters[@index].CharacterID" value="@character.CharacterID" />
                            <div class="scene-character-editor-card-header">
                                <div>
                                    <h4>@character.CharacterName</h4>
                                    <p>@(character.RoleInSceneTypeName ?? "Role not set") / @(character.PresenceTypeName ?? "Presence not set")</p>
                                </div>
                                <label class="scene-character-remove">
                                    <input type="checkbox" name="Characters[@index].Remove" value="true" />
                                    <input type="hidden" name="Characters[@index].Remove" value="false" />
                                    <span>Remove</span>
                                </label>
                            </div>

                            <div class="scene-inspector-editor-grid">
                                <div class="form-group">
                                    <label for="Characters_@(index)__RoleInSceneTypeID">Role</label>
                                    <select class="form-control form-control-sm" id="Characters_@(index)__RoleInSceneTypeID" name="Characters[@index].RoleInSceneTypeID">
                                        <option value="">Not set</option>
                                        @foreach (var option in Model.CharacterRoleOptions)
                                        {
                                            <option value="@option.Value" selected="@(option.Value == character.RoleInSceneTypeID?.ToString())">@option.Text</option>
                                        }
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="Characters_@(index)__PresenceTypeID">Presence</label>
                                    <select class="form-control form-control-sm" id="Characters_@(index)__PresenceTypeID" name="Characters[@index].PresenceTypeID">
                                        <option value="">Not set</option>
                                        @foreach (var option in Model.PresenceTypeOptions)
                                        {
                                            <option value="@option.Value" selected="@(option.Value == character.PresenceTypeID?.ToString())">@option.Text</option>
                                        }
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Characters_@(index)__LocationID">Current location</label>
                                <select class="form-control form-control-sm" id="Characters_@(index)__LocationID" name="Characters[@index].LocationID">
                                    <option value="">Not set</option>
                                    @foreach (var option in Model.LocationOptions)
                                    {
                                        <option value="@option.Value" selected="@(option.Value == character.LocationID?.ToString())">@option.Text</option>
                                    }
                                </select>
                            </div>

                            <div class="scene-inspector-editor-grid">
                                <div class="form-group">
                                    <label for="Characters_@(index)__EntryLocationID">Enters from</label>
                                    <select class="form-control form-control-sm" id="Characters_@(index)__EntryLocationID" name="Characters[@index].EntryLocationID">
                                        <option value="">Not set</option>
                                        @foreach (var option in Model.LocationOptions)
                                        {
                                            <option value="@option.Value" selected="@(option.Value == character.EntryLocationID?.ToString())">@option.Text</option>
                                        }
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="Characters_@(index)__ExitLocationID">Exits to</label>
                                    <select class="form-control form-control-sm" id="Characters_@(index)__ExitLocationID" name="Characters[@index].ExitLocationID">
                                        <option value="">Not set</option>
                                        @foreach (var option in Model.LocationOptions)
                                        {
                                            <option value="@option.Value" selected="@(option.Value == character.ExitLocationID?.ToString())">@option.Text</option>
                                        }
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="Characters_@(index)__AppearanceNotes">Appearance notes</label>
                                <textarea class="form-control form-control-sm" id="Characters_@(index)__AppearanceNotes" name="Characters[@index].AppearanceNotes" rows="2">@character.AppearanceNotes</textarea>
                            </div>

                            <div class="form-group">
                                <label for="Characters_@(index)__OutfitDescription">Outfit description</label>
                                <input class="form-control form-control-sm" id="Characters_@(index)__OutfitDescription" name="Characters[@index].OutfitDescription" value="@character.OutfitDescription" />
                            </div>

                            <div class="scene-inspector-editor-grid">
                                <div class="form-group">
                                    <label for="Characters_@(index)__PhysicalCondition">Physical condition</label>
                                    <input class="form-control form-control-sm" id="Characters_@(index)__PhysicalCondition" name="Characters[@index].PhysicalCondition" value="@character.PhysicalCondition" />
                                </div>
                                <div class="form-group">
                                    <label for="Characters_@(index)__EmotionalState">Emotional state</label>
                                    <input class="form-control form-control-sm" id="Characters_@(index)__EmotionalState" name="Characters[@index].EmotionalState" value="@character.EmotionalState" />
                                </div>
                            </div>
                        </article>
                    }
                </div>
            }
        </section>

        <section class="scene-character-editor-section">
            <div class="scene-character-editor-heading">
                <span>Add character</span>
            </div>
            <div class="form-group">
                <label for="NewCharacter_CharacterID">Character</label>
                <select class="form-control form-control-sm" id="NewCharacter_CharacterID" name="NewCharacter.CharacterID">
                    <option value="">Choose a project character</option>
                    @foreach (var option in availableCharacters)
                    {
                        <option value="@option.Value">@option.Text</option>
                    }
                </select>
            </div>
            <div class="scene-inspector-editor-grid">
                <div class="form-group">
                    <label for="NewCharacter_RoleInSceneTypeID">Role</label>
                    <select class="form-control form-control-sm" id="NewCharacter_RoleInSceneTypeID" name="NewCharacter.RoleInSceneTypeID" asp-items="Model.CharacterRoleOptions">
                        <option value="">Not set</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="NewCharacter_PresenceTypeID">Presence</label>
                    <select class="form-control form-control-sm" id="NewCharacter_PresenceTypeID" name="NewCharacter.PresenceTypeID" asp-items="Model.PresenceTypeOptions">
                        <option value="">Not set</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="NewCharacter_LocationID">Current location</label>
                <select class="form-control form-control-sm" id="NewCharacter_LocationID" name="NewCharacter.LocationID" asp-items="Model.LocationOptions">
                    <option value="">Not set</option>
                </select>
            </div>
            <div class="form-group">
                <label for="NewCharacter_AppearanceNotes">Appearance notes</label>
                <textarea class="form-control form-control-sm" id="NewCharacter_AppearanceNotes" name="NewCharacter.AppearanceNotes" rows="2"></textarea>
            </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 characters</button>
    </div>
</form>