{% extends 'stdgrid.html.twig' %}
{% import '/cards/note/view.html.twig' as noteView %}

{% block title %}{% if page_title is defined %}{{ page_title | trans }}{% endif %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/feeds.css') }}" type="text/css">
{% endblock stylesheets %}

{% block body %}
    <header class="feed-header">
        {% if page_title is defined %}
            <h1 class="heading-no-margin">{{ page_title | trans }}</h1>
        {% endif %}
        <nav class="feed-actions">
            <details class="feed-actions-details">
                <summary>
                    {{ icon('filter', 'icon icon-feed-actions') | raw }} {# button-container #}
                </summary>
                <div class="feed-actions-details-dropdown">
                    <ul>
                        {% for block in handle_event('AddFeedActions', app.request, notes is defined and notes is not empty) %}
                            {{ block | raw }}
                        {% endfor %}
                    </ul>
                </div>
            </details>
        </nav>
    </header>

    {# Backwards compatibility with hAtom 0.1 #}
    <main class="feed" tabindex="0" role="feed">
        <div class="h-feed hfeed notes">
            {% if notes is defined and notes is not empty %}
                {% for conversation in notes %}
                    {% block current_note %}
                        {% if conversation is instanceof('array') %}
                            {{ noteView.macro_note(conversation['note'], conversation['replies']) }}
                        {% else %}
                            {{ noteView.macro_note(conversation) }}
                        {% endif %}
                        <hr tabindex="0" title="{{ 'End of note and replies.' | trans }}">
                    {% endblock current_note %}
                {% endfor %}
            {% else %}
                <div class="feed-empty">
                    {{ icon('logo', 'icon feed-background') | raw }}
                </div>
            {% endif %}
        </div>
    </main>
{% endblock body %}