Tweak confirmation modals for AlpineJS + TailwindCSS

[davidnectarestudio]

Hello.

Can you recommend me some hints to tweak the confirmation Twig blocks to achieve this example? I need to open a modal following the HTML structure (combined with AlipneJS attributes) when I build a confirmation action button:

    public function buildDataTable(DataTableBuilderInterface $builder, array $options): void
    {
        $builder
            // ...
            ->addColumn('actions', ActionsColumnType::class, [
                'actions' => [
                    'delete' => [
                        'type' => ButtonActionType::class,
                        'type_options' => [
                            'attr' => [
                                'class' => 'btn btn-sm btn-info',
                                'data-bootstrap-target' => 'tooltip',
                                'data-bs-placement' => 'left',
                                'data-bs-title' => $this->translator->trans('app_employee_delete', [], 'routes'),
                            ],
                            'href' => fn (Employee $employee) => $this->urlGenerator->generate('app_employee_delete', ['id' => $employee->getId()]),
                            'icon' => 'trash',
                            'label' => '',
                                'confirmation' => [
                                    'label_confirm' => 'app_employee_delete',
                                ],
                        ],
                    ],

[davidnectarestudio]

[davidnectarestudio]

This is quite complex to solve due to the internals of the CSS + JS frameworks that I'm using.

I've ended with a very messy code and 2 Stimulus controllers that is very difficult to reuse.