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

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

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