{% extends "@ChillMain/layout.html.twig"  %}

{% block title 'notification.show notification from %sender%'|trans(
    { '%sender%': notification.sender|chill_entity_render_string }
) ~ ' ' ~ notification.title %}

{% block js %}
    {{ parent() }}
    {{ encore_entry_script_tags('mod_notification_toggle_read_status') }}
{% endblock %}

{% block css %}
    {{ parent() }}
    {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
{% endblock %}

{% block content %}
<div class="col-10 notification notification-show">

    <h1>{{ 'notification.Notification'|trans }}</h1>

    <div class="flex-table">
        {% include 'ChillMainBundle:Notification:_list_item.html.twig' with {
            'data': {
                 'template': handler.getTemplate(notification),
                 'template_data': handler.getTemplateData(notification)
            },
            'action_button': false,
            'full_content': true,
            'fold_item': false,
            'notification_cc': handler.getTemplateData(notification).notificationCc is defined ? handler.getTemplateData(notification).notificationCc : false
        } %}
    </div>

    {% include 'ChillMainBundle:Notification:_item_comments.html.twig' %}

    <ul class="record_actions sticky-form-buttons">
        <li class="cancel">
            <a href="{{ chill_return_path_or('chill_main_notification_my') }}" class="btn btn-cancel">
                {{ 'Cancel'|trans|chill_return_path_label }}
            </a>
        </li>
        <li>
            {# Vue component #}
            <span class="notification_toggle_read_status"
                data-notification-id="{{ notification.id }}"
                data-notification-current-is-read="1"
                data-container="notification-status"
            ></span>
        </li>
    </ul>
</div>
{% endblock content %}