{{#if this.shouldDisplay}}
    <div class="gh-dashboard-box grey activity-feed" data-test-dashboard-member-activity>
        <h4 class="gh-dashboard-header">Activity feed</h4>
        <div class="content">
            {{#let (members-event-fetcher filter=(if (feature "membersActivityFeed") "type:-[email_delivered_event,email_opened_event,email_failed_event]") pageSize=5) as |eventsFetcher|}}
                {{#if eventsFetcher.isLoading}}
                    Loading...
                {{/if}}

                {{#if eventsFetcher.isError}}
                    <p class="error">
                        There was an error loading events
                        {{#if eventsFetcher.errorMessage}}
                            <code>{{eventsFetcher.errorMessage}}</code>
                        {{/if}}
                    </p>
                {{/if}}

                {{#unless (or eventsFetcher.isLoading eventsFetcher.isError)}}
                    <div class="gh-event-timeline">
                        {{#if eventsFetcher.data}}
                            <ul class="gh-dashboard-activity-feed">
                                {{#each eventsFetcher.data as |event|}}
                                    {{#let (parse-member-event event) as |parsedEvent|}}
                                        <li data-test-dashboard-member-activity-item>
                                            <LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
                                                <div class="activity">
                                                    <div>
                                                        <span class="member">{{parsedEvent.subject}}</span>
                                                        {{parsedEvent.action}}
                                                        {{parsedEvent.object}}
                                                        <span class="highlight">{{parsedEvent.info}}</span>
                                                    </div>
                                                </div>
                                            </LinkTo>
                                            <span class="time">{{moment-from-now parsedEvent.timestamp}}</span>
                                        </li>
                                    {{/let}}
                                {{/each}}
                            </ul>
                        {{else}}
                            <div class="gh-no-data-list" data-test-no-member-activities>
                                {{svg-jar "no-data-list"}}
                                <span>No member activity available.</span>
                            </div>
                        {{/if}}
                    </div>

                    {{#if (feature "membersActivityFeed")}}
                        <div class="gh-dashboard-top-members-footer">
                            <LinkTo @route="members-activity">See all activity {{svg-jar "arrow-right"}}</LinkTo>
                        </div>
                    {{/if}}
                {{/unless}}
            {{/let}}
        </div>
    </div>
{{/if}}