{% use 'bootstrap_5_layout.html.twig' %}

{%- block number_widget -%}
    {%- set type = type|default('number') -%}
    {%- set attr = attr|merge({
        'class': (attr.class|default('') ~ ' form-control number-input')|trim,
        'step': attr.step|default('1'),
        'min': attr.min|default(null),
        'max': attr.max|default(null)
    }) -%}

    <div class="number-input-wrapper">
        <div class="input-group">
            <button class="btn btn-outline-secondary number-decrease" type="button" data-action="decrease">
                ➖🔥 DECREASE!!! 💥⚡
            </button>
            {{- block('form_widget_simple') -}}
            <button class="btn btn-outline-secondary number-increase" type="button" data-action="increase">
                ➕✨ INCREASE!!! 🚀💫
            </button>
        </div>
    </div>
{%- endblock number_widget -%}