@using LANCommander.Components
@model LANCommander.Models.GameViewModel

@{
    ViewData["Title"] = "Add Game";
}

<div class="container-xl">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="row align-items-center">
            <div class="col">
                <h2 class="page-title">
                    Add Game
                </h2>
            </div>
        </div>
    </div>
</div>

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
            <div class="col-12">
                <form asp-action="Add" class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                                <div class="mb-3">
                                    <label asp-for="Game.Title" class="control-label"></label>
                                    <div class="input-group">
                                        <input asp-for="Game.Title" class="form-control" />
                                        <button class="btn" type="submit" asp-action="Lookup">Lookup</button>
                                    </div>
                                    <span asp-validation-for="Game.Title" class="text-danger"></span>
                                </div>
                                <div class="mb-3">
                                    <label asp-for="Game.SortTitle" class="control-label"></label>
                                    <input asp-for="Game.SortTitle" class="form-control" />
                                    <span asp-validation-for="Game.SortTitle" class="text-danger"></span>
                                </div>
                                <div class="mb-3">
                                    <label asp-for="Game.Icon" class="control-label"></label>
                                    <input asp-for="Game.Icon" class="form-control" />
                                    <span asp-validation-for="Game.Icon" class="text-danger"></span>
                                </div>
                                <div class="mb-3">
                                    <label asp-for="Game.Description" class="control-label"></label>
                                    <textarea asp-for="Game.Description" class="form-control" data-bs-toggle="autosize"></textarea>
                                    <span asp-validation-for="Game.Description" class="text-danger"></span>
                                </div>
                                <div class="mb-3">
                                    <label asp-for="Game.ReleasedOn" class="control-label"></label>
                                    <input asp-for="Game.ReleasedOn" class="form-control" />
                                    <span asp-validation-for="Game.ReleasedOn" class="text-danger"></span>
                                </div>
                                <div class="mb-3">
                                    <label class="form-check">
                                        <input asp-for="Game.Singleplayer" type="checkbox" class="form-check-input" />
                                        <span class="form-check-label">Singleplayer</span>
                                        <span class="form-check-description">Game has a singleplayer mode</span>
                                    </label>
                                </div>
                                <div class="mb-3">
                                    <label asp-for="Developers" class="control-label"></label>
                                    <input type="text" class="developer-select" />
                                    <select asp-for="SelectedDevelopers" class="d-none"></select>
                                </div>
                                <div class="mb-3">
                                    <label asp-for="Publishers" class="control-label"></label>
                                    <input type="text" class="publisher-select" />
                                    <select asp-for="SelectedPublishers" class="d-none"></select>
                                </div>

                                <div class="mb-3">
                                    <label asp-for="Genres" class="control-label"></label>
                                    <input type="text" class="genre-select" />
                                    <select asp-for="SelectedGenres" class="d-none"></select>
                                </div>

                                <div class="mb-3">
                                    <label asp-for="Tags" class="control-label"></label>
                                    <input type="text" class="tag-select" />
                                    <select asp-for="SelectedTags" class="d-none"></select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-header">
                        <h3 class="card-title">Actions</h3>
                    </div>

                    <component type="typeof(ActionEditor)" render-mode="Server" param-Actions="Model.Game.Actions.ToList()" param-GameId="Model.Game.Id" />

                    <div class="card-header">
                        <h3 class="card-title">Multiplayer Modes</h3>
                    </div>

                    <component type="typeof(MultiplayerModeEditor)" render-mode="Server" param-MultiplayerModes="Model.Game.MultiplayerModes" param-GameId="Model.Game.Id" />

                    <div class="card-footer">
                        <div class="d-flex">
                            <a asp-action="Index" class="btn btn-ghost-primary">Cancel</a>
                            <button type="submit" class="btn btn-primary ms-auto">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

    <script>
        new Select('.developer-select', @Html.Raw(Json.Serialize(Model.Developers)));
        new Select('.publisher-select', @Html.Raw(Json.Serialize(Model.Publishers)));
        new Select('.genre-select', @Html.Raw(Json.Serialize(Model.Genres)));
        new Select('.tag-select', @Html.Raw(Json.Serialize(Model.Tags)));
    </script>
}
