@inject ModalService ModalService

<div class="modal fade" id="modal@(Id)" tabindex="-1">
    <div class="modal-dialog @(CssClasses)">
        <div class="modal-content">
            @if (ShouldShow)
            {
                @ChildContent
            }
        </div>
    </div>
</div>

@code
{
    [Parameter]
    public string CssClasses { get; set; } = "";
    
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    
    private int Id;
    private bool ShouldShow = false;

    protected override void OnInitialized()
    {
        Id = GetHashCode();
    }

    public async Task Show()
    {
        ShouldShow = true;
        await InvokeAsync(StateHasChanged);
        
        await ModalService.Show("modal" + Id);
    }

    public async Task Hide()
    {
        await ModalService.Hide("modal" + Id);
        
        ShouldShow = false;
        await InvokeAsync(StateHasChanged);
    }
}
