<div {{ attributes }}>
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-user"></i> {{ computed.contact }}
            </h3>
            <div class="card-tools">
                <a href="#" rel="tooltip" title="{{ "contact_edit"|trans }}" class="btn btn-tool" data-model="edit" data-value="true" data-action="live#update:prevent">
                    {{ icon('pencil') }}
                </a>

                {% if this.canDelete %}
                    <a href="#" rel="tooltip" title="{{ "contact_delete"|trans }}" class="delete-contact btn btn-tool" data-toggle="modal" data-target="#{{ 'delete-' ~ computed.contact.id }}">
                        {{ icon('trash-o') }}
                    </a>

                    {% component BootstrapModal with {id: 'delete-' ~ computed.contact.id} %}
                        {% block modal_header %}
                            <h5>{{ 'Confirm'|trans }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        {% endblock %}
                        {% block modal_body %}
                            {{ 'Are you sure you want to delete the contact?'|trans }}
                        {% endblock %}
                        {% block modal_footer %}
                            <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'Close'|trans }}</button>
                            <button type="button" class="btn btn-primary" data-action="live#action:prevent" data-live-action-param="delete">{{ 'Confirm'|trans }}</button>
                        {% endblock %}
                    {% endcomponent %}
                {% endif %}

            </div>
        </div>

        <div class="card-body">
            {% if this.edit %}
                {{ form_start(form, {attr: {
                    'data-action': 'live#action:prevent',
                    'data-live-action-param': 'save'
                }}) }}

                    {{ form_row(form) }}

                    <button type="button" class="btn btn-default" data-model="edit" data-value="false" data-action="live#update:prevent">{{ 'Cancel'|trans }}</button>
                    <button type="submit" class="btn btn-primary">{{ 'Save'|trans }}</button>
                {{ form_end(form) }}
            {% else %}
                <dl class="dl-horizontal">
                    <dt>{{ 'client.contact.details.email'|trans }}:</dt>
                    <dd>{{ computed.contact.email }}</dd>
                </dl>

                {% if computed.contact.additionalContactDetails|length > 0 %}
                    <h5>{{ 'client.contact.details.extra'|trans }}</h5>
                    <dl class="dl-horizontal">
                        {% for details in computed.contact.additionalContactDetails %}
                            <dt>{{ details.type|title }}:</dt>
                            <dd>{{ details.value }}</dd>
                        {% endfor %}
                    </dl>
                {% endif %}
            {% endif %}
        </div>
    </div>
</div>
