Merge remote-tracking branch 'origin/master' into issue389_add_age

This commit is contained in:
2022-01-31 11:44:55 +01:00
61 changed files with 1387 additions and 166 deletions

View File

@@ -2,25 +2,44 @@ import {createApp} from 'vue';
import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
/**
*
* To start this app, add this container into recordAction passed as argument to
* `ChillPerson/AccompanyingPeriod/_list_item.html.twig`:
*
* ```html+twig
* {% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_UPDATE', period) %}
* <li>
* <span data-set-referrer-app="data-set-referrer-app" data-set-referrer-accompanying-period-id="{{ period.id }}"></span>
* </li>
* {% endif %}
* ```
*
* The app will update the referrer displayed into dedicated span
*/
document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
let
periodId = Number.parseInt(el.dataset.setReferrerAccompanyingPeriodId);
const url = `/api/1.0/person/accompanying-course/${periodId}/referrers-suggested.json`;
fetchResults(url).then(suggested => {
const app = createApp({
components: {
SetReferrer,
},
template:
'<set-referrer :suggested="this.suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
'<set-referrer :suggested="suggested" :periodId="periodId" @referrerSet="onReferrerSet"></set-referrer>',
data() {
return {
suggested, periodId,
periodId, suggested, original: suggested,
}
},
methods: {
onReferrerSet(ref) {
const bloc = document.querySelector(`[data-accompanying-period-id="${this.periodId}"]`);
if (bloc === null) {
console.error('bloc not found');
@@ -37,6 +56,7 @@ document.querySelectorAll('[data-set-referrer-app]').forEach(function (el) {
label.textContent = ref.text;
label.classList.remove('chill-no-data-statement');
this.suggested = this.original.filter(user => user.id !== ref.id);
}
}
});

View File

@@ -0,0 +1,6 @@
export const lightGreen = '#43b29d';
export const darkGreen = '#368e7e';
export const lightBrown = '#a2ac80';
export const darkBrown = '#929d69';
export const lightBlue = '#8d9dab';
export const darkBlue = '#718596';

View File

@@ -2,6 +2,7 @@ import { createStore } from 'vuex'
import { getHouseholdByPerson, getCoursesByPerson, getRelationshipsByPerson } from './api'
import { getHouseholdLabel, getHouseholdWidth, getRelationshipLabel, getRelationshipTitle, getRelationshipDirection, splitId, getGender, getAge } from './vis-network'
import {visMessages} from "./i18n";
import { darkBlue, darkBrown, darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
const debug = process.env.NODE_ENV !== 'production'
@@ -172,8 +173,8 @@ const store = createStore({
id: 'relationship_' + splitId(link.id,'id')
+ '-person_' + link.fromPerson.id + '-person_' + link.toPerson.id,
arrows: getRelationshipDirection(link),
color: 'lightblue',
font: { color: '#33839d' },
color: lightGreen,
font: { color: darkGreen },
dashes: true,
label: getRelationshipLabel(link),
title: getRelationshipTitle(link),
@@ -316,10 +317,10 @@ const store = createStore({
to: `${household.id}`,
id: `${household.id}-person_${m.person.id}`,
arrows: 'from',
color: 'pink',
font: { color: '#D04A60' },
color: lightBrown,
font: { color: darkBrown },
dashes: (getHouseholdWidth(m) === 1)? [0,4] : false, //edge style: [dash, gap, dash, gap]
label: getHouseholdLabel(m),
//label: getHouseholdLabel(m),
width: getHouseholdWidth(m),
})
if (!getters.isPersonLoaded(m.person.id)) {
@@ -375,8 +376,8 @@ const store = createStore({
to: `${course.id}`,
id: `accompanying_period_${splitId(course.id,'id')}-person_${p.person.id}`,
arrows: 'from',
color: 'orange',
font: { color: 'darkorange' },
color: lightBlue,
font: { color: darkBlue },
})
if (!getters.isPersonLoaded(p.person.id)) {
dispatch('addMissingPerson', [p.person, course])
@@ -428,8 +429,8 @@ const store = createStore({
id: 'relationship_' + splitId(relationship.id,'id')
+ '-person_' + relationship.fromPerson.id + '-person_' + relationship.toPerson.id,
arrows: getRelationshipDirection(relationship),
color: 'lightblue',
font: { color: '#33839d' },
color: lightGreen,
font: { color: darkGreen },
dashes: true,
label: getRelationshipLabel(relationship),
title: getRelationshipTitle(relationship),

View File

@@ -1,4 +1,5 @@
import { visMessages } from './i18n'
import { darkGreen, lightBlue, lightBrown, lightGreen } from './colors';
import { visMessages } from './i18n';
/**
* Vis-network initial data/configuration script
@@ -15,12 +16,12 @@ window.options = {
/*
*/
configure: {
enabled: true,
enabled: false,
filter: 'physics',
showButton: true
},
physics: {
enabled: true,
enabled: false,
barnesHut: {
theta: 0.5,
gravitationalConstant: -2000,
@@ -89,7 +90,7 @@ window.options = {
edges: {
font: {
color: '#b0b0b0',
size: 9,
size: 14,
face: 'arial',
background: 'none',
strokeWidth: 2, // px
@@ -112,30 +113,30 @@ window.options = {
},
color: {
border: '#b0b0b0',
background: 'rgb(193,229,222)',
background: lightGreen,
highlight: {
border: '#89c9a9',
background: 'rgb(156,213,203)'
border: '#216458',
background: darkGreen,
},
hover: {
border: '#89c9a9',
background: 'rgb(156,213,203)'
border: '#216458',
background: darkGreen,
}
},
opacity: 0.85,
opacity: 0.9,
shadow:{
enabled: true,
color: 'rgba(0,0,0,0.5)',
size:10,
x:5,
y:5
y:5,
},
},
household: {
color: 'pink'
color: lightBrown,
},
accompanying_period: {
color: 'orange',
color: lightBlue,
},
}
}

View File

@@ -1,6 +1,6 @@
<template>
<ul class="list-suggest add-items" v-if="this.suggested.length > 0">
<li v-for="r in this.suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
<ul class="list-suggest add-items" v-if="suggested.length > 0">
<li v-for="r in suggested" @click="setReferrer(r)"><span>{{ r.text }}</span></li>
</ul>
</template>
@@ -11,16 +11,23 @@ import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
export default {
name: "SetReferrer",
props: {
suggested: {
suggested: {
type: Array,
required: false,
default: [],
//default: [],
},
periodId: {
type: Number,
required: true
}
},
data() {
return {
/*suggested: [
{id: 5, text: 'Robert'}, {id: 8, text: 'Monique'},
]*/
}
},
emits: ['referrerSet'],
methods: {
setReferrer: function(ref) {

View File

@@ -151,14 +151,14 @@
{% if accompanyingCourse.requestorPerson is not null %}
<h4 class="item-key">{{ 'Requestor'|trans }}</h4>
{% if accompanyingCourse.requestorAnonymous %}
<div class="confidential"><p class="blur">{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
<div class="confidential"><p>{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}</p></div>
{% else %}
{{ _self.insert_onthefly('person', accompanyingCourse.requestorPerson) }}
{% endif %}
{% elseif accompanyingCourse.requestorThirdParty is not null %}
<h4 class="item-key">{{ 'Requestor'|trans }}</h4>
{% if accompanyingCourse.requestorAnonymous %}
<div class="confidential"><p class="blur">{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
<div class="confidential"><p>{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}</p></div>
{% else %}
{{ _self.insert_onthefly('thirdparty', accompanyingCourse.requestorThirdParty) }}
{% endif %}

View File

@@ -1,4 +1,4 @@
<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass }}{% endif %}" {% if itemAttrs is defined %}{{ itemAttrs }}{% endif %}>
<div class="item-bloc accompanying-period-item{% if itemBlocClass is defined %} {{ itemBlocClass|raw }}{% endif %}" data-accompanying-period-id="{{ period.id|e('html_attr') }}">
<div class="item-row">
<div class="wrap-header">
<div class="wh-row">
@@ -43,6 +43,7 @@
</div>
<div class="wh-col">
{% if chill_accompanying_periods.fields.user == 'visible' %}
{# the tags `data-referrer-text` is used by module `@ChillPerson/mod/AccompanyingPeriod/setReferrer.js` #}
{% if period.user %}
<abbr class="referrer" title="{{ 'Referrer'|trans }}">{{ 'Referrer'|trans }}:</abbr>
<span data-referrer-text="data-referrer-text">{{ period.user|chill_entity_render_box }}</span>

View File

@@ -0,0 +1,30 @@
{% extends "@ChillMain/layout.html.twig" %}
{% set activeRouteKey = 'chill_person_accompanying_period_user_list' %}
{% block title %}{{ 'My accompanying periods'|trans }}{% endblock title %}
{% macro recordAction(period) %}
<li>
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': period.id }) }}"
class="btn btn-show" title="{{ 'See accompanying period'|trans }}"></a>
</li>
{% endmacro %}
{% block content %}
<div class="col-md-10">
<h1>{{ 'My accompanying periods'|trans }}</h1>
<div class="flex-table accompanyingcourse-list">
{% for period in accompanyingPeriods %}
{% include '@ChillPerson/AccompanyingPeriod/_list_item.html.twig' with {'period': period, 'recordAction': _self.recordAction(period)} %}
{% endfor %}
</div>
{{ chill_pagination(pagination) }}
</div>
{% endblock %}

View File

@@ -78,16 +78,11 @@
{% set app = person.findParticipationForPeriod(acp) %}
<div class="item-row separator">
<div class="wrap-list periods-list">
<div class="wl-row">
<div class="wl-col title">
<h3 class="courseid mb-2">
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': acp.id }) }}"
title="{{ 'See accompanying period'|trans }}" class="btn btn-outline-primary">
<i class="fa fa-random fa-fw"></i>
{{ 'File number'|trans }} {{ acp.id }}
</a>
</h3>
</div>
<div class="wl-col list">
@@ -97,28 +92,37 @@
{{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
</div>
{% endif %}
{% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) %}
{% if notif_counter.total > 0 %}
{{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) }}
{% endif %}
</div>
<div class="ms-auto">
{% if acp.requestorPerson == person %}
<span class="as-requestor badge bg-info" title="{{ 'Requestor'|trans|e('html_attr') }}">
{{ 'Requestor'|trans({'gender': person.gender}) }}
</span>
{% endif %}
{% if acp.emergency %}
<span class="badge rounded-pill bg-danger">{{- 'Emergency'|trans|upper -}}</span>
{% endif %}
{% if acp.confidential %}
<span class="badge rounded-pill bg-confidential">{{- 'Confidential'|trans|upper -}}</span>
{% endif %}
{% if acp.step == 'DRAFT' %}
<span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans }}">{{ 'course.draft'|trans }}</span>
{% endif %}
{% if acp.step == 'CLOSED' %}
<span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.closed'|trans }}">{{ 'course.closed'|trans }}</span>
{% endif %}
</div>
</div>
</div>
{% if acp.user is not null %}
<div class="wl-row">
<div class="wl-col title">
@@ -131,7 +135,7 @@
</div>
</div>
{% endif %}
{% if acp.socialIssues|length > 0 %}
<div class="wl-row">
<div class="wl-col title">
@@ -144,24 +148,7 @@
</div>
</div>
{% endif %}
{# ????
{% if acp.requestorPerson == person %}
<div class="wl-row">
<div class="wl-col title">
<h3>
</h3>
</div>
<div class="wl-col list">
<span class="as-requestor badge bg-info" title="{{ 'Requestor'|trans|e('html_attr') }}">
{{ 'Requestor'|trans({'gender': person.gender}) }}
</span>
</div>
</div>
{% endif %}
#}
{% if acp.currentParticipations|length > 1 %}
<div class="wl-row">
<div class="wl-col title">
@@ -190,7 +177,16 @@
</div>
</div>
{% endif %}
<ul class="record_actions record_actions_column">
<li>
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': acp.id }) }}"
class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
<i class="fa fa-random fa-fw"></i>
</a>
</li>
</ul>
{% if (acp.requestorPerson is not null and acp.requestorPerson.id != person.id) or acp.requestorThirdParty is not null %}
<div class="wl-row">
<div class="wl-col title">
@@ -222,7 +218,7 @@
</div>
</div>
{% endif %}
</div>
</div>
{% endfor %}

View File

@@ -52,9 +52,7 @@
{% if resource.comment.comment is not empty %}
<div class="item-row separator">
<section class="chill-entity entity-comment-embeddable">
<blockquote class="chill-user-quote">
<div>{{ resource.comment.comment }}<div>
</blockquote>
<div>{{ resource.comment|chill_entity_render_box }}<div>
</section>
</div>
{% endif %}

View File

@@ -0,0 +1,37 @@
{{ form_start(form) }}
{{ form_row(form.startDate) }}
{{ form_row(form.endDate) }}
{% if form.hostPerson is defined %}
{{ form_row(form.hostPerson) }}
{% endif %}
{% if form.hostThirdParty is defined %}
{{ form_row(form.hostThirdParty) }}
{% endif %}
{% if form.address is defined %}
{{ form_row(form.address) }}
{% block js %}
{{ encore_entry_script_tags('mod_input_address') }}
{% endblock %}
{% block css %}
{{ encore_entry_link_tags('mod_input_address') }}
{% endblock %}
{% endif %}
{{ form_row(form.comment) }}
<ul class="record_actions sticky-form-buttons">
<li>
<button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
</li>
</ul>
{{ form_end(form) }}

View File

@@ -0,0 +1,58 @@
{% extends "@ChillPerson/Person/layout.html.twig" %}
{% set activeRouteKey = '' %}
{% block title %}{{ 'Delete residential address'|trans }}{% endblock %}
{% block personcontent %}
<div class="address-new">
<h1>{{ block('title') }}</h1>
{% set a = residentialAddress %}
<ul class="list-content fa-ul">
{% if a.hostPerson is not null %}
<li>
<i class="fa fa-li fa-home"></i>
<span class="item-key">{{ "Address of"|trans}} </span>
<span class="chill-entity entity-person badge-person">{{ a.hostPerson|chill_entity_render_box }}</span>
</li>
<li>
{% set address_date = date(a.startDate|date("m/d/Y")) %}
{% if a.hostPerson.getCurrentHouseholdAddress(a.endDate) is not null %}
<i class="fa fa-li fa-map-marker"></i>
{{ a.hostPerson.getCurrentHouseholdAddress(a.endDate)|chill_entity_render_box }}
{% endif %}
</li>
{% elseif a.hostThirdParty is not null %}
<li>
<i class="fa fa-li fa-home"></i>
<span class="item-key">{{ "Address of"|trans}}</span>
<span class="chill-entity entity-person badge-person">{{ a.hostThirdParty|chill_entity_render_box }}</span>
</li>
<li>
{% if a.hostThirdParty.address is not null %}
<i class="fa fa-li fa-map-marker"></i>
{{ a.hostThirdParty.address|chill_entity_render_box }}
{% endif %}
</li>
{% else %}
<li>
{% if a.address is not null %}
<i class="fa fa-li fa-map-marker"></i>
{{ a.address|chill_entity_render_box }}
{% endif %}
{% endif %}
</li>
</ul>
{{ include('@ChillMain/Util/confirmation_template.html.twig',
{
'title' : 'Delete residential address ?'|trans,
'confirm_question' : 'Are you sure you want to remove this residential address for %name% ?'|trans({'%name%': person|chill_entity_render_string }),
'cancel_route' : 'chill_person_residential_address_list',
'cancel_parameters' : {'id' : person.Id},
'form' : delete_form
} ) }}
</div>
{% endblock %}

View File

@@ -0,0 +1,51 @@
{% extends "@ChillPerson/Person/layout.html.twig" %}
{% set activeRouteKey = '' %}
{% block title 'Edit a residential address'|trans %}
{% block personcontent %}
<div class="address-edit">
{% block content %}
<h1>{{ block('title') }}</h1>
{{ form_start(form) }}
{{ form_row(form.startDate) }}
{{ form_row(form.endDate) }}
{% if residentialAddress.address is not null %}
{% if form.address is defined %}
{{ form_row(form.address) }}
{% block js %}
{{ encore_entry_script_tags('mod_input_address') }}
{% endblock %}
{% block css %}
{{ encore_entry_link_tags('mod_input_address') }}
{% endblock %}
{% endif %}
{% endif %}
{{ form_row(form.comment) }}
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ chill_path_add_return_path('chill_person_residential_address_list', {'id': person.id}) }}" class="btn btn-cancel">
{{ 'Cancel'|trans|chill_return_path_label }}
</a>
</li>
<li>
<button class="btn btn-update" type="submit">{{ 'Save'|trans }}</button>
</li>
</ul>
{{ form_end(form) }}
{% endblock %}
</div>
{% endblock %}

View File

@@ -0,0 +1,116 @@
{% extends "@ChillPerson/Person/layout.html.twig" %}
{% set activeRouteKey = '' %}
{% block title %}{{ 'Residential addresses history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}{% endblock %}
{% block personcontent %}
<div class="person-address">
<h1>{{ 'Residential addresses history'|trans }}</h1>
{% if is_granted('CHILL_PERSON_SEE', person) %}
{% if addresses|length == 0 %}
<span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
{% else %}
<div class="flex-table">
{% for a in addresses %}
{% if a.address is not null %}
{% set kind = 'address' %}
{% else %}
{% set kind = null %}
{% endif %}
<div class="item-bloc">
<div class="item-row">
<div class="item-col" style="width: 33%;">
<ul class="list-unstyled h3">
{% if a.endDate is not null %}
<li><span class="item-key">{{'Since'|trans}} : </span>{{ a.startDate|format_date('long') }}</li>
{% endif %}
<li><span class="item-key">{{'Until'|trans}} : </span><b>{{ a.endDate|format_date('long') }}</b></li>
</ul>
</div>
<div class="item-col flex-column justify-content-start">
<div class="float-button top">
<div class="box">
<div class="action">
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
<a href="{{ path('chill_person_residential_address_edit', { 'id' : a.id, 'kind' : kind } ) }}" class="btn btn-update" title="{{ 'Update'|trans|e('html_attr') }}"></a>
<a href="{{ path('chill_person_residential_address_delete', { 'id' : a.id, 'kind' : kind } ) }}" class="btn btn-delete" title="{{ 'Delete'|trans|e('html_attr') }}"></a>
{% endif %}
</div>
<ul class="list-content fa-ul">
{% if a.hostPerson is not null %}
<li>
<i class="fa fa-li fa-home"></i>
<span class="item-key">{{ "Address of"|trans}} </span>
<span class="chill-entity entity-person badge-person">{{ a.hostPerson|chill_entity_render_box }}</span>
</li>
<li>
{% set address_date = date(a.startDate|date("m/d/Y")) %}
{% if a.hostPerson.getCurrentHouseholdAddress(a.endDate) is not null %}
<i class="fa fa-li fa-map-marker"></i>
{{ a.hostPerson.getCurrentHouseholdAddress(a.endDate)|chill_entity_render_box }}
{% endif %}
</li>
{% elseif a.hostThirdParty is not null %}
<li>
<i class="fa fa-li fa-home"></i>
<span class="item-key">{{ "Address of"|trans}}</span>
<span class="chill-entity entity-person badge-person">{{ a.hostThirdParty|chill_entity_render_box }}</span>
</li>
<li>
{% if a.hostThirdParty.address is not null %}
<i class="fa fa-li fa-map-marker"></i>
{{ a.hostThirdParty.address|chill_entity_render_box }}
{% endif %}
</li>
{% else %}
<li>
{% if a.address is not null %}
<i class="fa fa-li fa-map-marker"></i>
{{ a.address|chill_entity_render_box }}
{% endif %}
{% endif %}
</li>
</ul>
<div class="item-row">
{% if not a.comment.isEmpty %}
{{ a.comment|chill_entity_render_box }}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endif %}
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ path('chill_person_view', { 'person_id' : person.id } ) }}" class="btn btn-cancel">
{{ 'Back to the person details'|trans }}
</a>
</li>
{% if is_granted('CHILL_PERSON_UPDATE', person) %}
<li>
<a class="btn btn-create"
href="{{ path('chill_person_residential_address_new', { 'id' : person.id } ) }}">
{{ 'Add a residential address'|trans }}
</a>
</li>
{% endif %}
</ul>
</div>
{% endblock %}

View File

@@ -0,0 +1,29 @@
{% extends "@ChillPerson/Person/layout.html.twig" %}
{% set activeRouteKey = '' %}
{% block title %}{{ 'New residential address'|trans }}{% endblock %}
{% block personcontent %}
<div class="address-new">
{% block content %}
<h1>{{ block('title') }}</h1>
{# TODO #}
{% block form %}
{% include '@ChillPerson/ResidentialAddress/_form.html.twig' %}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% block js %}
{{ encore_entry_script_tags('mod_pickentity_type') }}
{% endblock %}
{% block css %}
{{ encore_entry_link_tags('mod_pickentity_type') }}
{% endblock %}

View File

@@ -0,0 +1,49 @@
{% extends "@ChillMain/layout.html.twig" %}
{% block title 'Which kind of residential address would you create ?'|trans %}
{% block content %}
<div class="col-10 centered">
<h1>{{ block('title') }}</h1>
<div class="container" style="margin-top: 2rem;">
<div class="row">
<div class="col-md-4 mb-4">
<a
href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'person'}) }}"
class="btn btn-outline-chill-green-dark">
{{ 'The address of another person'|trans }}
</a>
</div>
<div class="col-md-8">
<p>{{ 'residential_address_person_explanation'|trans }}</p>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<a
href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'thirdparty'}) }}"
class="btn btn-outline-chill-green-dark">
{{ 'The address of a third party'|trans }}
</a>
</div>
<div class="col-md-8">
<p>{{ 'residential_address_third_party_explanation'|trans }}</p>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<a
href="{{ chill_path_forward_return_path('chill_person_residential_address_new', {'id': person.id, 'kind': 'address'}) }}"
class="btn btn-outline-chill-green-dark">
{{ 'A new address'|trans }}
</a>
</div>
<div class="col-md-8">
<p>{{ 'residential_address_new_address_explanation'|trans }}</p>
</div>
</div>
</div>
</div>
{% endblock %}