<div {{ attributes }}>
    <div class="card">
        <div class="card-header">
            <div class="card-tools float-right">
                <a href="#" class="btn btn-success btn-sm" data-toggle="modal" data-target="#{{ 'add-address' }}">
                    {{ icon('building') }} {{ "client.address.add"|trans }}
                </a>

                {{ form_start(form, {
                    attr: {
                        'data-action': 'live#action:prevent',
                        'data-live-action-param': 'save'
                    }
                }) }}
                {% component BootstrapModal with {id: 'add-address'} %}
                    {% block modal_header %}
                        <h5>{{ 'Add Address'|trans }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    {% endblock %}
                    {% block modal_body %}
                        {{ form_row(form) }}
                    {% endblock %}
                    {% block modal_footer %}
                        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'Close'|trans }}</button>
                        <button type="submit" class="btn btn-primary">{{ 'Save'|trans }}</button>
                    {% endblock %}
                {% endcomponent %}
                {{ form_end(form) }}
            </div>

            <h3 class="card-title">
                {{ icon('building-o')}} {{ "client.heading.addresses"|trans }}
            </h3>
        </div>

        <div class="card-body row">
            {% for address in client.addresses %}
                <div class="col-6">
                    <twig:AddressInfo :address="address" :key="address.id" />
                </div>
            {% endfor %}
        </div>
    </div>
</div>
