<div class="modal fade" id="@nameof(AddCustomerModal)" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            @if (Model != null)
            {
                <EditForm Model="Model" OnValidSubmit="SubmitAsync">
                    <div class="modal-body">

                        <div class="mb-3 row">
                            <div class="dropdown col-md-6">
                                <label class="form-label">Product</label>
                                @if (Model.Product != null)
                                {
                                    <div class="d-flex align-items-center border rounded border-1 p-2" @onclick="ResetProduct" style="cursor: pointer;">
                                        <div>
                                            <img src="/api/images/@Model.Product.ImageId" width="30" height="30" />
                                        </div>
                                        <div class="ms-2">
                                            @Model.Product.Name
                                        </div>                                         
                                    </div>
                                } else
                                {
                                    <input class="form-control" type="text" @bind="searchProduct" @bind:event="oninput" placeholder="Search product by Name" />
                                    <div class="dropdown-menu @(searchProduct.Length > 0 ? "show" : "")">
                                        @foreach (var product in SearchedProducts)
                                        {
                                            <a class="dropdown-item" @onclick="() => ChangeProduct(product)" href="javascript:void(0)">
                                                <img src="/api/images/@product.ImageId" width="30" height="30" /> @product.Name
                                            </a>
                                        }
                                    </div>
                                }

                            </div>

                            <div class="dropdown col-md-6">
                                <label class="form-label">User</label>
                                @if (Model.User != null)
                                {
                                    <div class="d-flex align-items-center border rounded border-1 p-2" @onclick="ResetUser" style="cursor: pointer;">
                                        <div>
                                            <img src="@Model.User.AvatarUrl()" width="30" height="30" />
                                        </div>
                                        <div class="ms-2">
                                            @Model.User.Name
                                        </div>                                         
                                    </div>
                                } else
                                {
                                    <input class="form-control" type="text" @bind="searchUser" @bind:event="oninput" placeholder="Search user by SteamID or Name" />
                                    <div class="dropdown-menu @(searchUser.Length > 0 ? "show" : "")">
                                        @foreach (var user in SearchedUsers)
                                        {
                                            <a class="dropdown-item" @onclick="() => ChangeUser(user)" href="javascript:void(0)">
                                                @user.Name
                                            </a>
                                        }
                                    </div>
                                }    
                            </div>
                        </div>

                        @if (msg != null)
                        {
                            <div class="mb-3">
                                <div class="text-danger">@msg</div>
                            </div>                            
                        } 

                        <div class="mb-3">
                            <DataAnnotationsValidator />
                            <ValidationSummary />
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        @if (isLoading)
                        {
                            <LoadingButton />
                        }
                        else
                        {
                            <button type="submit" class="btn btn-primary">Add Customer</button>
                        }
                    </div>
                </EditForm>
            }
        </div>
    </div>
</div>