Lightbox (popver) twig component

DialogPopover.html.twig

<div popover id="{{ id }}" {{ attributes.defaults({class: 'pop-over dialog-popover'}) }}>
    <div class="md-card h-100">
        {% block dialog_header %}
            <div class="card-header">{{ title|trans|capitalize }}
                <button type="button" class="icon-button" popovertargetaction="hide"
                        popovertarget="{{ id }}">
                    <span class="icon icon-cancel"></span>
                </button>
            </div>
        {% endblock %}

        {% block content %}
        {% endblock %}
    </div>
</div>

example-usages.html.twig

{# Example 1: open iframe in popover lazily #}
<button type="button" class="md-button text-button" popovertarget="open-iframe">
    open iframe in popover
</button>

<twig:DialogPopover id="open-iframe" title="Lazy iframe">
    <iframe src="{{ path('some_path'}) }}" loading="lazy"></iframe>
    {# loading="lazy" attribtue does the trick, the iframe will be loaded when popover opens #}
</twig:DialogPopover>


{# Example 2: Showing confirmation upon delete #}
<twig:DialogPopover id="delete-contract" title="confirm.deletion">
    <div class="columns gap-sm flex-center w-100">
        <form action="{{ path('delete_contract', {id: contractId}) }}" method="POST" class="w-100">
            <div class="columns flex-center gap-md w-100">
                <button type="submit" class="md-button bg-danger outlined-button" >
                    <span class="icon icon-confirm"></span> {{ 'Yes'|trans }}
                </button>
                <button type="button" class="md-button outlined-button" popovertargetaction="hide"
                        popovertarget="delete-contract">
                    <span class="icon icon-cancel"></span> {{ 'No'|trans }}
                </button>
            </div>
        </form>
    </div>
</twig:DialogPopover>