{% 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 %}

{% import '@ChillPerson/AccompanyingCourse/Comment/macro_showItem.html.twig' as m %}

{% macro recordAction(comment) %}
    {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
    <li>
        <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
            '_fragment': 'comment-' ~ comment.id,
            'edit': comment.id,
            'id': comment.notification.id
        }) }}" class="btn btn-edit" title="{{ 'Edit'|trans }}"
        ></a>
    </li>
    {% endif %}
{% endmacro %}

{% 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
        } %}
    </div>

    <div class="notification-comment-list my-5">
        <h2 class="chill-blue">{{ 'notification.comments_list'|trans }}</h2>

        {% if notification.comments|length > 0 %}
            <div class="flex-table">
                {% for comment in notification.comments %}

                    {% if editedCommentForm is null or editedCommentId != comment.id %}
                        {{ m.show_comment(comment, {
                            'recordAction': _self.recordAction(comment)
                        }) }}
                    {% else %}
                        <div class="item-bloc">
                            <div class="item-row row">
                                <a id="comment-{{ comment.id }}"></a>

                                {{ form_start(editedCommentForm) }}
                                {{ form_errors(editedCommentForm) }}
                                {{ form_widget(editedCommentForm.content) }}
                                <input type="hidden" name="form" value="edit" />
                                <ul class="record_actions">
                                    <li class="cancel">
                                        <a href="{{ chill_path_forward_return_path('chill_main_notification_show', {
                                            '_fragment': 'comment-' ~ comment.id,
                                            'id': notification.id }) }}" class="btn btn-cancel">
                                            {{ 'cancel'|trans }}
                                        </a>
                                    </li>
                                    <li>
                                        <button class="btn btn-save" type="submit">{{ 'Save'|trans }}</button>
                                    </li>
                                </ul>
                                {{ form_end(editedCommentForm) }}

                            </div>
                        </div>
                    {% endif %}

                {% endfor %}
            </div>
        {% endif %}

        {% if appendCommentForm is not null %}
        <div class="new-comment my-5">
            <h2 class="chill-blue mb-4">{{ 'Write a new comment'|trans }}</h2>

            {{ form_start(appendCommentForm) }}
            {{ form_errors(appendCommentForm) }}
            {{ form_widget(appendCommentForm.content) }}
            <input type="hidden" name="form" value="append" />
            <ul class="record_actions">
                <li>
                    <button class="btn btn-create" type="submit">{{ 'notification.append_comment'|trans }}</button>
                </li>
            </ul>
            {{ form_end(appendCommentForm) }}

        </div>
        {% endif %}
    </div>

    <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 %}