<div class="activity-event-selector rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700" ...attributes>
    <div class="activity-event-selector-actions flex flex-row items-center justify-between px-4 py-2">
        <div>
            <div class="text-sm font-semibold">{{t "fleet-ops.component.activity-event-selector.activity-events"}}</div>
            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                <InputInfo @text={{t "fleet-ops.component.activity-event-selector.activity-events"}} />
            </Attach::Tooltip>
        </div>
        <div></div>
    </div>
    <div class="activity-event-selector-events-container">
        <div class="px-4 mb-2">
            <DropdownButton
                @text={{t "fleet-ops.component.activity-event-selector.select-event-to-add"}}
                @buttonClass="flex-row-reverse justify-between w-48"
                @icon="caret-down"
                @iconClass="mr-0i"
                @size="sm"
                @iconPrefix="fas"
                @triggerClass="hidden md:flex"
                @helpText={{t "fleet-ops.component.activity-event-selector.activity-events-select-events-info"}}
                as |dd|
            >
                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                    <div class="p-1 overflow-y-scroll h-40">
                        {{#each-in this.availableEvents as |eventName event|}}
                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.addEvent eventName)}}>
                                <div class="py-0.5">
                                    <div class="text-sm font-mono font-semibold mb-0.5">{{eventName}}</div>
                                    <div class="text-xs">{{event.description}}</div>
                                </div>
                            </a>
                        {{/each-in}}
                    </div>
                </div>
            </DropdownButton>
        </div>
        {{#each this.events as |eventName index|}}
            <div class="activity-event-selector-event">
                <span>{{eventName}}</span>
                <Button @type="danger" @icon="trash" @size="xs" @onClick={{fn this.removeEvent index}} />
            </div>
        {{/each}}
    </div>
</div>