<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">
                <div class="wh-col">
                    <span class="h3">
                        <i class="fa fa-fw fa-random"></i>
                        <b>{{ period.id }}</b>
                    </span>
                    {% if period.emergency %}
                        <span class="badge rounded-pill bg-danger">{{- 'Emergency'|trans|upper -}}</span>
                    {% endif %}
                    {% if period.confidential %}
                        <span class="badge rounded-pill bg-confidential">{{- 'Confidential'|trans|upper -}}</span>
                    {% endif %}
                </div>
                <div class="wh-col">
                    {% if period.step == 'DRAFT' %}
                        <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans|e('html_attr') }}">{{ 'course.draft'|trans }}</span>
                    {% elseif period.step == 'CLOSED' %}
                        <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.closed'|trans|e('html_attr') }}">{{ 'course.closed'|trans }}</span>
                    {% elseif period.step == 'CONFIRMED_INACTIVE_SHORT' %}
                        <span class="badge bg-chill-yellow text-primary" style="font-size: 85%;" title="{{ 'course.inactive_short'|trans|e('html_attr') }}">{{ 'course.inactive_short'|trans }}</span>
                    {% elseif period.step == 'CONFIRMED_INACTIVE_LONG' %}
                        <span class="badge bg-danger" style="font-size: 85%;" title="{{ 'course.inactive_long'|trans|e('html_attr') }}">{{ 'course.inactive_long'|trans }}</span>
                    {% endif %}
                </div>
            </div>
            <div class="wh-row">
                <div class="wh-col">
                    {% if period.closingDate == null and period.step != 'DRAFT' %}
                        {{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': period.openingDate|format_date('long') } ) }}
                    {% elseif period.closingDate != null %}
                        {{ 'accompanying_period.dates_from_%opening_date%_to_%closing_date%'|trans({
                            '%opening_date%': period.openingDate|format_date('long'),
                            '%closing_date%': period.closingDate|format_date('long')}
                        ) }}
                        {% if period.isOpen == false %}
                            <dl class="chill_view_data">
                                <dt>{{ 'Closing motive'|trans }}&nbsp;:</dt>
                                <dd>{{ period.closingMotive|chill_entity_render_box }}</dd>
                            </dl>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="wh-col" style="align-items: center;">
                    {% 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>
                        {% else %}
                            <span class="chill-no-data-statement" data-referrer-text="data-referrer-text">{{ 'No accompanying user'|trans }}</span>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% if period.requestor is not null or period.participations.count > 0 or period.socialIssues.count > 0%}
        <div class="item-row separator">
            <div class="wrap-list">
                {% if period.requestorPerson is not null or period.requestorThirdParty is not null %}
                    <div class="wl-row">
                        <div class="wl-col title"><h3>{{ 'Requestor'|trans({'gender': null }) }}</h3></div>
                        <div class="wl-col list">
                            {% if period.requestorPerson is not null %}
                                <span class="wl-item">
                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                        action: 'show', displayBadge: true,
                                        targetEntity: { name: 'person', id: period.requestorPerson.id },
                                        buttonText: period.requestorPerson|chill_entity_render_string,
                                        isDead: period.requestorPerson.deathdate is not null
                                    } %}
                                </span>
                            {% endif %}
                            {% if period.requestorThirdParty is not null %}
                                <span class="wl-item">
                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                        action: 'show', displayBadge: true,
                                        targetEntity: { name: 'thirdparty', id: period.requestorThirdParty.id },
                                        buttonText: period.requestorThirdParty|chill_entity_render_string
                                    } %}
                                </span>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
                {% if period.participations.count > 0 %}
                    <div class="wl-row">
                        <div class="wl-col title"><h3>{{ 'Participants'|trans }}</h3></div>
                        <div class="wl-col list">
                            {% for p in period.getCurrentParticipations %}
                                <span class="wl-item">
                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
                                        action: 'show', displayBadge: true,
                                        targetEntity: { name: 'person', id: p.person.id },
                                        buttonText: p.person|chill_entity_render_string,
                                        isDead: p.person.deathdate is not null
                                    } %}
                                </span>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                {% if period.socialIssues.count > 0 %}
                    <div class="wl-row">
                        <div class="wl-col title"><h3>{{ 'Social issues'|trans }}</h3></div>
                        <div class="wl-col list">
                            {% for si in period.socialIssues %}
                                <p class="wl-item">
                                    {{ si|chill_entity_render_box }}
                                </p>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
                {% if show_address|default(false) and period.location is not null %}
                    <div class="wl-row">
                        <div class="wl-col title"><h3>{{ 'Accompanying course location'|trans }}</h3></div>
                        <div class="wl-col list">
                                <p class="wl-item">
                                    {{ period.location|chill_entity_render_string }}
                                </p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}

    {% if show_pinned_comment|default(false) and period.pinnedComment is not empty%}
        <div class="item-row separator comment">
            <div style="width: 100%">
                <h4 class="item-key visually-hidden">{{ 'Pinned comment'|trans }}</h4>
                <blockquote class="chill-user-quote">
                    {{ period.pinnedComment.content|u.truncate(750, '…', false)|chill_markdown_to_html }}
                    {% if period.pinnedComment.content|length > 750 %}
                        <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_comment_list', {'accompanying_period_id': period.id}) }}">{{ 'Read more'|trans }}</a>
                    {% endif %}
                    <div class="metadata">
                        {{ 'Last updated by'| trans }}
                        <span class="user">
                            {{ period.pinnedComment.updatedBy|chill_entity_render_box }}
                    </span>
                        {{ 'on'|trans ~ ' ' }}
                        <span class="date">
                            {{ period.pinnedComment.updatedAt|format_datetime("medium", "short") }}
                    </span>
                    </div>
                </blockquote>
            </div>
        </div>
    {% endif %}

    <div class="item-row separator">
        {% if itemMeta is not defined %}
            {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', period.id) %}
            {% if notif_counter.total > 0 %}
                <div class="item-col item-meta">
                    {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', period.id) }}
                </div>
            {% endif %}
        {% else %}
            {{ itemMeta }}
        {% endif %}
        <div class="item-col">
            {% if recordAction is defined %}
                <ul class="record_actions">
                    {{ recordAction }}
                </ul>
            {% endif %}
        </div>
    </div>
</div>
