@using Connected.Models.Modal;
@if (IsVisible)
{
    <div class="modal fade show" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content" @onclick="PreventClose">
                    @if (!ModalOptions.NoHeader)
                    {
                        <div class="modal-header">
                            <h3 class="modal-title">@Title</h3>
                        </div>
                    }
                    <div class="modal-body">
                        @Content
                    </div>
                    <div class="modal-footer">
                        @foreach (ModalButton button in buttons)
                        {
                            <button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
                        }
                    </div>
                </div>
            </div>
        </div>
}