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

{% block title 'notification.My own notifications'|trans %}

{% block js %}
    {{ parent() }}
    {{ encore_entry_script_tags("mod_notification_toggle_read_status") }}
    {{ encore_entry_script_tags("mod_notification_toggle_read_all_status") }}
{% endblock %}

{% block css %}
    {{ parent() }}
    {{ encore_entry_link_tags("mod_notification_toggle_read_status") }}
    {{ encore_entry_link_tags("mod_notification_toggle_read_all_status") }}
{% endblock %}

{% block content %}
    <div class="col-10 notification notification-list">
        <h1>{{ block("title") }}</h1>
        <ul class="nav nav-pills justify-content-center">
            <li class="nav-item">
                <a
                    class="nav-link {% if step == 'inbox' %}active{% endif %}"
                    href="{{ path('chill_main_notification_my') }}"
                >
                    {{ "notification.Notifications received" | trans }}
                    {% if unreads['inbox'] > 0 %}
                        <span class="badge rounded-pill bg-danger">
                    {{ unreads["inbox"] }}
                </span>
                    {% endif %}
                </a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link {% if step == 'sent' %}active{% endif %}"
                    href="{{ path('chill_main_notification_sent') }}"
                >
                    {{ "notification.Notifications sent" | trans }}
                    {% if unreads['sent'] > 0 %}
                        <span class="badge rounded-pill bg-danger">
                    {{ unreads["sent"] }}
                </span>
                    {% endif %}
                </a>
            </li>
        </ul>

        {% if datas|length == 0 %} {% if step == 'inbox' %}
            <p class="chill-no-data-statement">
                {{ "notification.Any notification received" | trans }}
            </p>
        {% else %}
            <p class="chill-no-data-statement">
                {{ "notification.Any notification sent" | trans }}
            </p>
        {% endif %}
        {% else %}
            <div class="flex-table accordion accordion-flush" id="notification-fold">
                {% for data in datas %}
                    {% set notification = data.notification %}
                    {% include '@ChillMain/Notification/_list_item.html.twig' with {
                        'fold_item': true, 'notification_cc': data.template_data.notificationCc
                        is defined ? data.template_data.notificationCc : false } %}
                {% endfor %}
            </div>

            {{ chill_pagination(paginator) }}
        {% endif %}

        <ul class="record_actions sticky-form-buttons justify-content-end">
            <li class="ml-auto d-flex align-items-center gap-2">
                <span class="notification_all_read"></span>
            </li>
        </ul>
    </div>

{% endblock content %}