@using LANCommander.Data.Enums
@using LANCommander.Data.Models

@{
    int i = 0;
}
<div class="table-responsive">
    <table class="table mb-0">
        <thead>
            <tr>
                <th>Type</th>
                <th>Min Players</th>
                <th>Max Players</th>
                <th>Description</th>
                <th></th>
            </tr>
        </thead>

        <tbody>
            @if (MultiplayerModes.Count == 0)
            {
                <tr><td colspan="5">If the game has any multiplayer modes you can add them here to provide metadata to clients.</td></tr>
            }

            @foreach (var multiplayerMode in MultiplayerModes)
            {
                var index = i;

                <tr>
                    <td>
                        <select @bind="multiplayerMode.Type" name="Game.MultiplayerModes[@i].Type" class="form-control">
                            @foreach (var type in Enum.GetValues(typeof(MultiplayerType)))
                            {
                                <option value="@type">@type</option>
                            }
                        </select>
                    </td>
                    <td><input @bind="multiplayerMode.MinPlayers" name="Game.MultiplayerModes[@i].MinPlayers" class="form-control" /></td>
                    <td><input @bind="multiplayerMode.MaxPlayers" name="Game.MultiplayerModes[@i].MaxPlayers" class="form-control" /></td>
                    <td><input @bind="multiplayerMode.Description" name="Game.MultiplayerModes[@i].Description" class="form-control" /></td>
                    <td>
                        <input name="Game.MultiplayerModes[@i].GameId" type="hidden" value="@GameId" />

                        <div class="btn-list flex-nowrap justify-content-end">
                            <button class="btn btn-ghost-danger btn-icon" @onclick="() => RemoveMode(index)" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                    </td>
                </tr>

                i++;
            }
            <tr>
                <td colspan="5">
                    <div class="btn-list flex-nowrap justify-content-end">
                        <button class="btn btn-ghost-primary" @onclick="AddMode" type="button">Add Mode</button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@code {
    [Parameter] public ICollection<MultiplayerMode> MultiplayerModes { get; set; }
    [Parameter] public Guid GameId { get; set; }

    private void AddMode()
    {
        if (MultiplayerModes == null)
            MultiplayerModes = new List<MultiplayerMode>();

        MultiplayerModes.Add(new MultiplayerMode());
    }

    private void RemoveMode(int index)
    {
        MultiplayerModes.Remove(MultiplayerModes.ElementAt(index));
    }
}
