<section class="gh-dashboard5-section gh-dashboard5-overview">
    <article {{did-insert this.loadCharts}} class="gh-dashboard5-box is-secondary">

        <div class="gh-dashboard5-columns">
            <div class="gh-dashboard5-column">
                <Dashboard::v5::Parts::Metric
                    @label={{gh-pluralize this.totalMembers "Total member" without-count=true}}
                    @value={{this.totalMembersFormatted}}
                    @trends={{this.hasTrends}}
                    @percentage={{this.totalMembersTrend}}
                    @large={{true}} /> 
            </div>
            <div class="gh-dashboard5-column">
                <Dashboard::v5::Parts::Metric
                    @label={{gh-pluralize this.paidMembers "Paid member" without-count=true}}
                    @value={{this.paidMembersFormatted}}
                    @trends={{this.hasTrends}}
                    @percentage={{this.paidMembersTrend}}
                    @large={{true}} /> 
            </div>
            <div class="gh-dashboard5-column">
                <Dashboard::v5::Parts::Metric
                    @label={{gh-pluralize this.freeMembers "Free member" without-count=true}}
                    @value={{this.freeMembersFormatted}}
                    @trends={{this.hasTrends}}
                    @percentage={{this.freeMembersTrend}}
                    @large={{true}} /> 
            </div>
        </div>

    </article>
</section>
