transmit all options from a twig include template

src/Bundle/ChillPersonBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -0,0 +1,28 @@
+<div id="address"></div>{# <== vue_address component #}
+
+<script type="text/javascript">
+    window.vueRootComponent = 'app';
+    window.mode = '{{ mode|e('js') }}';
+    window.personId = {{ person.id|e('js') }};
+    window.addressId = {{ address_id|e('js') }};
+    window.backUrl = '{{ path('chill_person_view', { 'person_id': person.id })|e('js') }}';
+{% if modalTitle is defined %}
+    window.modalTitle = '{{ modalTitle|trans|e('js') }}';
+{% endif %}
+    window.button = {};
+{% if buttonText is defined %}
+    window.buttonText = '{{ buttonText|trans|e('js') }}';
+{% endif %}
+{% if buttonType is defined %}
+    window.button.type = '{{ buttonType|e('js') }}';
+{% endif %}
+{% if buttonSize is defined %}
+    window.button.size = '{{ buttonSize|e('js') }}';
+{% endif %}
+{% if buttonDisplay is defined and buttonDisplay == false %}
+    window.button.display = false;
+{% endif %}
+</script>
+
+{{ encore_entry_script_tags('vue_address') }}
+{{ encore_entry_link_tags('vue_address') }}

src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig

@@ -25,22 +25,13 @@
 
     {% block content %}
         <h1>{{ block('title') }}</h1>
-        <div id="address"></div>
+
+        {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+            address_id: person.lastAddress.id,
+            mode: 'edit'
+        } %}
+
     {% endblock %}
 
 </div>
 {% endblock %}
-
-{% block css %}
-    {{ encore_entry_link_tags('vue_address') }}
-{% endblock %}
-
-{% block js %}
-    <script type="text/javascript">
-        window.personId = {{ person.id|e('js') }};
-        window.addressId = {{ address.id|e('js') }};
-        window.mode = 'edit';
-        window.vueRootComponent = 'app';
-    </script>
-    {{ encore_entry_script_tags('vue_address') }}
-{% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -27,10 +27,16 @@
 
     <ul class="record_actions my-3">
         <li style="margin: auto;">
-            <a class="btn btn-lg btn-create"
-               href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
-                {{ 'Add an address'|trans }}
-            </a>
+
+            {# include vue_address component #}
+            {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                address_id: person.lastAddress.id,
+                mode: 'new',
+                buttonSize: 'btn-lg',
+                buttonText: 'Add an address',
+                modalTitle: 'Add an address',
+            } %}
+
         </li>
     </ul>
 
@@ -58,10 +64,16 @@
             {% set row = row + 1 %}
             {% if address.validTo is not empty and address.validTo < previousRowFrom %}
                 <div class="{{ 'row' ~ row ~ ' ' }}col-a action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
                 <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
+
+                    {# include vue_address component #}
                     <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
+
                 <div class="date">
                     {% if address.validTo is not empty %}
                         {{ address.validTo|format_date('short') }}
@@ -81,7 +93,10 @@
                         'has_no_address': true
                     }) }}
                     <ul class="record_actions">
+
+                        {# include vue_address component #}
                         <li><a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a></li>
+
                     </ul>
                 </div>
             {# endif #}
@@ -130,6 +145,7 @@
             </a>
         </li>
         <li>
+            {# include vue_address component #}
             <a class="btn btn-create"
                 href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
                 {{ 'Add an address'|trans }}

src/Bundle/ChillPersonBundle/Resources/views/Person/view.html.twig

@@ -200,10 +200,16 @@ This view should receive those arguments:
 
                         <ul class="list-inline text-right mt-2">
                             <li class="list-inline-item">
-                                <a class="btn btn-warning btn-sm" title="{{ 'Edit'|trans }}"
-                                   href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : person.lastAddress.id } ) }}">
-                                    <i class="fa fa-pencil fa-fw"></i>
-                                </a>
+                                {# include vue_address component #}
+                                {% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
+                                    address_id: person.lastAddress.id,
+                                    mode: 'edit',
+                                    modalTitle: 'Edit address',
+                                    buttonText: 'Edit address',
+                                    buttonType: 'btn-update',
+                                    buttonSize: 'btn-sm',
+                                    buttonDisplay: false
+                                } %}
                             </li>
                             <li class="list-inline-item">
                                 <a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"