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

    <h1>{{ notification.title }}</h1>

    <div>
        {% include handler.getTemplate(notification) with handler.getTemplateData(notification) %}
    </div>

    <div>
        {# à remplacer par un commentEmbeddable #}
        {{ notification.message|chill_markdown_to_html }}
    </div>

    {% if notification.comments|length > 0 %}
        {% for comment in notification.comments %}
            {% if editedCommentForm is null or editedCommentId != comment.id %}
                <div>
                    <a id="comment-{{ comment.id }}"></a>
                    <blockquote class="chill-user-quote">
                        {{ comment.content|chill_markdown_to_html }}
                    </blockquote>

                    {% if is_granted('CHILL_MAIN_NOTIFICATION_COMMENT_EDIT', comment) %}
                        <ul class="record_actions">
                            <li>
                                <a href="{{ chill_path_forward_return_path('chill_main_notification_show', { '_fragment': 'comment-'~comment.id, 'edit': comment.id, 'id': notification.id }) }}" class="btn btn-edit"></a>
                            </li>
                        </ul>
                    {% endif %}
                </div>
            {% else %}
                <div>
                    <a id="comment-{{ comment.id }}"></a>
                    {{ form_start(editedCommentForm) }}
                    {{ form_widget(editedCommentForm) }}

                    <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"></a>
                        </li>
                        <li>
                            <button type="submit" class="btn btn-save"></button>
                        </li>
                    </ul>
                    {{ form_end(editedCommentForm) }}
                </div>
            {% endif %}
        {% endfor %}
    {% endif %}

    {% if appendCommentForm is not null %}
        <div>
            {{ form_start(appendCommentForm) }}
            {{ form_widget(appendCommentForm) }}

            <input type="hidden" name="form" value="append" />

            <ul class="record_actions">
                <li>
                    <button type="submit" class="btn btn-save">{{ 'notification.append_comment'|trans }}</button>
                </li>
            </ul>
            {{ form_end(appendCommentForm) }}
        </div>
    {% endif %}

    <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"
            ></span>
        </li>
    </ul>
</div>
{% endblock content %}