{% extends '@ChillPerson/Household/layout.html.twig' %}

{% block title 'household.Relationship'|trans %}

{#
     Give more space to graph:
     * use parent twig block (layout_wvm_content)
     * hide title (d-none)
     * apply negative margin-top
#}
{% block layout_wvm_content %}
<div class="row justify-content-center">

    <div class="col-md-10 col-xxl d-none">
        <h1>{{ block('title') }}</h1>
    </div>

    <div id="relationship-graph"
        style="margin-top: -3rem"
        data-persons="{{ persons|e('html_attr') }}">
    </div>
</div>
{% endblock %}

{% block block_post_menu %}
    <div id="visgraph-legend"></div>
{% endblock %}

{% block js %}
    {{ encore_entry_script_tags('vue_visgraph') }}
{% endblock %}

{% block css %}
    {{ encore_entry_link_tags('vue_visgraph') }}
{% endblock %}