<div class="modal @(Visible? "show":"") " style="display: @(Visible? "block;":"none")" id="@DialogId" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5 " id="exampleModalLabel">@Title</h1>
                <button type="button" class="btn-close" style="margin: 0 0;" data-bs-dismiss="modal" aria-label="Close" @onclick="ToggleShowDialog"> </button>
            </div>
            <div class="modal-body">
                @DialogBody
            </div>

        </div>
    </div>

</div>

@code
{
    [Parameter]
    public bool Visible { get; set; } 
    [Parameter]
    public string DialogId { get; set; } = "exampleModal";
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public RenderFragment DialogBody { get; set; }

    private void ToggleShowDialog()
    {
        Visible = false;
        StateHasChanged();
    }
}
