<RadzenStack class="rz-p-12" Gap="0.5rem">
    <RadzenText TextStyle="TextStyle.Body2" class="rz-text-secondary-color">Use the close button to remove a chip, or type a value and click Add.</RadzenText>
    <RadzenCard Variant="Variant.Outlined" class="rz-p-4">
        <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" Gap="0.5rem" AlignItems="AlignItems.Center">
            <RadzenText TextStyle="TextStyle.Body2" Style="white-space: nowrap;" class="rz-text-secondary-color"><strong>To:</strong></RadzenText>
            @foreach (var recipient in recipients)
            {
                <RadzenChip Text="@recipient"
                            Icon="person"
                            ChipStyle="BadgeStyle.Info"
                            Close="@(args => RemoveRecipient(recipient))" />
            }
            <RadzenStack Orientation="Orientation.Horizontal" Gap="0.25rem" AlignItems="AlignItems.Center" Style="flex: 1; min-width: 12rem;">
                <RadzenTextBox @bind-Value="@recipientInput" Placeholder="Add recipient email" Style="flex: 1;" @onkeydown="@OnRecipientKeyDown" />
                <RadzenButton Text="Add" Icon="add" Click="@AddRecipient" Size="ButtonSize.Small" />
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>
</RadzenStack>

@code {
    string recipientInput = string.Empty;
    List<string> recipients = new() { "pedro@example.com", "john@example.com" };

    void AddRecipient()
    {
        var candidate = recipientInput.Trim();
        if (!string.IsNullOrWhiteSpace(candidate) && !recipients.Contains(candidate))
        {
            recipients.Add(candidate);
            recipientInput = string.Empty;
        }
    }

    void OnRecipientKeyDown(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            AddRecipient();
        }
    }

    void RemoveRecipient(string recipient)
    {
        recipients.Remove(recipient);
    }
}
