@if (IsVisible)
{
    <div class="modal-backdrop fade show"></div>
    <div class="modal fade show d-block" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">New Folder</h6>
                    <button type="button" class="btn-close" @onclick="Close"></button>
                </div>
                <div class="modal-body">
                    <input class="form-control form-control-sm" placeholder="Folder name" @bind="_name" />
                    @if (!string.IsNullOrEmpty(ErrorMessage)) { <div class="text-danger small mt-1">@ErrorMessage</div> }
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary btn-sm" @onclick="Close">Cancel</button>
                    <button class="btn btn-primary btn-sm" @onclick="Submit">Create</button>
                </div>
            </div>
        </div>
    </div>
}

@code {
    [Parameter] public bool IsVisible { get; set; }
    [Parameter] public EventCallback<bool> IsVisibleChanged { get; set; }
    [Parameter] public int? ParentFolderId { get; set; }
    [Parameter] public string? ErrorMessage { get; set; }
    [Parameter] public EventCallback<(int? ParentFolderId, string Name)> OnSubmit { get; set; }

    private bool _wasVisible;
    private string _name = string.Empty;

    protected override void OnParametersSet()
    {
        // Reset internal state on transition from hidden -> visible.
        if (IsVisible && !_wasVisible)
        {
            _name = string.Empty;
        }
        _wasVisible = IsVisible;
    }

    private async Task Close()
    {
        await IsVisibleChanged.InvokeAsync(false);
    }

    private async Task Submit()
    {
        await OnSubmit.InvokeAsync((ParentFolderId, _name.Trim()));
    }
}