{{#if this.shouldDisplay}}
    <div class="gh-dashboard-box activity" data-test-dashboard-member-activity>
        <h4 class="gh-dashboard-header-container">
            <h4 class="gh-dashboard-header">
                Activity
            </h4>
        </h4>
        <div class="content">
            {{#let (members-event-fetcher filter=(members-event-filter excludeEmailEvents=true) 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-list">
                                {{#each eventsFetcher.data as |event|}}
                                    {{#let (parse-member-event event) as |parsedEvent|}}
                                        <li class="gh-dashboard-activity-item" data-test-dashboard-member-activity-item>
                                            <LinkTo class="member-details" @route="member" @model="{{parsedEvent.memberId}}">
                                                <div class="gh-dashboard-activity-container">
                                                    {{svg-jar parsedEvent.icon}}
                                                    <div class="gh-dashboard-activity-detail">
                                                        <div class="gh-dashboard-activity-name">
                                                            {{parsedEvent.subject}}
                                                        </div>
                                                        <div class="gh-dashboard-activity-event">
                                                            {{parsedEvent.action}}
                                                            {{parsedEvent.object}}
                                                            {{parsedEvent.info}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </LinkTo>
                                            <span class="gh-dashboard-activity-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>

                    <div class="footer">
                        <LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>See all activity →</LinkTo>
                    </div>
                {{/unless}}
            {{/let}}
        </div>
    </div>
{{/if}}