<section class="gh-dashboard5-section gh-dashboard5-engagement">
    <article {{did-insert this.loadCharts}} class="gh-dashboard5-box">
        <Dashboard::v5::Parts::Metric
            @label="Engagement" /> 

        <div class="gh-dashboard5-columns">
            <div class="gh-dashboard5-column">
                <Dashboard::v5::Parts::Metric
                    @label="Engaged in the last 30 days"
                    @value={{this.data30Days}}
                    @secondary={{true}}
                    />
            </div>
            <div class="gh-dashboard5-column">
                <Dashboard::v5::Parts::Metric
                    @label="Engaged in the last 7 days"
                    @value={{this.data7Days}}
                    @secondary={{true}}
                    />
            </div>
            <div class="gh-dashboard5-column">
                <Dashboard::v5::Parts::Metric
                    @label="Newsletter subscribers"
                    @value={{this.dataSubscribers}}
                    @secondary={{true}}
                    />
            </div>
        </div>
    </article>

    {{#if this.hasPaidTiers}}
        <div class="gh-dashboard5-select">
            <PowerSelect
                @selected={{this.selectedStatusOption}}
                @options={{this.statusOptions}}
                @searchEnabled={{false}}
                @onChange={{this.onSwitchStatus}}
                @triggerComponent="gh-power-select/trigger"
                @triggerClass="gh-contentfilter-menu-trigger"
                @dropdownClass="gh-contentfilter-menu-dropdown"
                @matchTriggerWidth={{false}}
                as |option|
            >
                {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
            </PowerSelect>
        </div>
    {{/if}}
</section>
