@page "/games"
@inject GameService Service

<PageTitle>Games</PageTitle>

<h1>Games</h1>

<div class="game-cards">
    @foreach (var game in Service.Games)
    {
        <div class="game-card" @onclick="() => ShowDetail(game)">
            <h3>@game.Title</h3>
            @if (!string.IsNullOrEmpty(game.Link) || !string.IsNullOrEmpty(game.Git))
            {
                <div class="links">
                    @if (!string.IsNullOrEmpty(game.Link))
                    {
                        <a href="@game.Link" target="_blank" @onclick:stopPropagation>
                            <span class="label">link</span> @game.Link
                        </a>
                    }
                    @if (!string.IsNullOrEmpty(game.Git))
                    {
                        <a href="@game.Git" target="_blank" @onclick:stopPropagation>
                            <span class="label">git</span> @game.Git
                        </a>
                    }
                </div>
            }
        </div>
    }
</div>

@if (_selected is not null)
{
    <div class="dialog-overlay" @onclick="CloseDetail">
        <div class="dialog" @onclick:stopPropagation>
            <div class="dialog-header">
                <h2>@_selected.Title</h2>
                <button class="dialog-close" @onclick="CloseDetail">&times;</button>
            </div>
            <div class="dialog-body">
                @((MarkupString)_selected.ContentHtml)
            </div>
        </div>
    </div>
}

@code {
    private GameDoc? _selected;

    private void ShowDetail(GameDoc game) => _selected = game;

    private void CloseDetail() => _selected = null;
}