{% load i18n %}

{% if error_message %}
<div class="border-b border-danger-light bg-danger-light/20 px-5 py-4 text-left">
    <c-ui.text.text>
        {{ error_message }}
    </c-ui.text.text>
</div>
{% endif %}

{% for group in groups %}
<div data-inbox-group-id="{{ group.key }}">
    {% if group.related_items %}
        <details class="group/conversation border-b border-gray-200" data-inbox-conversation>
            <summary data-inbox-selection-row tabindex="-1" class="flex cursor-pointer list-none items-center [&::-webkit-details-marker]:hidden">
                <span class="flex shrink-0 items-center gap-1 pl-2 text-xs text-gray-500" title="{% blocktrans count counter=group.related_items|length %}{{ counter }} related message{% plural %}{{ counter }} related messages{% endblocktrans %}">
                    <i class="fa fa-chevron-right transition-transform group-open/conversation:rotate-90" aria-hidden="true"></i>
                    <span aria-hidden="true">{{ group.related_items|length }}</span>
                    <span class="sr-only">{% blocktrans count counter=group.related_items|length %}{{ counter }} related message{% plural %}{{ counter }} related messages{% endblocktrans %}</span>
                </span>
                <div class="min-w-0 flex-1">
                    <c-features.communication.inbox_item :item="group.item"/>
                </div>
            </summary>
            <div class="ml-5 border-l border-gray-200">
                {% for related in group.related_items %}
                    <div data-inbox-selection-row class="border-t border-gray-200"><c-features.communication.inbox_item :item="related"/></div>
                {% endfor %}
            </div>
        </details>
    {% else %}
        <div data-inbox-selection-row class="border-b border-gray-200"><c-features.communication.inbox_item :item="group.item"/></div>
    {% endif %}
</div>

{% empty %}
{% if not page_obj or page_obj.number == 1 %}
<div>
    <button class="w-full border-b border-gray-200 px-5 py-4 text-left hover:bg-gray-50">
        <div class="flex flex-col items-start gap-3">
            <c-ui.text.text>
                {% blocktrans trimmed %}
                    No items found in this folder.
                {% endblocktrans %}
            </c-ui.text.text>
            <c-ui.text.muted>
                Perform a <a 
                    class="text-primary"
                    id="deep-search-btn"
                    >deep search</a>
            </c-ui.text.muted>
        </div>
    </button>
</div>
{% endif %}

{% endfor %}

{% if page_obj and page_obj.has_next %}
<div
    class="border-b border-gray-200 py-4 text-center text-sm text-gray-500"
    data-inbox-page-loader
    hx-get="{{ request.path }}{% if pagination_querystring %}?{{ pagination_querystring }}&amp;{% else %}?{% endif %}page={{ page_obj.next_page_number }}"
    hx-trigger="intersect once root:#inbox-items"
    hx-target="this"
    hx-swap="outerHTML"
>
    {% blocktrans %}Loading more…{% endblocktrans %}
</div>
{% endif %}