<div class="gh-dashboard-minichart gh-dashboard-mix {{if this.isChartCadence 'is-cadence'}}">
    <div class="gh-dashboard-content">
        <div class="gh-dashboard-data">
            <Dashboard::Parts::Metric
                @label="Paid mix" />

            {{#if this.isChartCadence}}
                <div class="gh-dashboard-legend">
                    <div class="gh-dashboard-legend-item">Monthly</div>
                    <div class="gh-dashboard-legend-item">Annual</div>
                </div>
            {{/if}}
        </div>
        <div class="gh-dashboard-chart" {{did-insert this.loadCharts}}>
            {{#if this.loading}}
                <div class="gh-dashboard-chart-loading">
                    <div class="gh-loading-spinner"></div>
                </div>
            {{else}}
                <div class="gh-dashboard-chart-container">
                    <div class="gh-dashboard-chart-box">
                        <EmberChart
                            @type={{this.chartType}}
                            @data={{this.chartData}}
                            @options={{this.chartOptions}}
                            @height={{110}} />
                    </div>

                    <div id="gh-dashboard-mix-tooltip" class="gh-dashboard-tooltip">
                        <div class="gh-dashboard-tooltip-value">
                            -
                        </div>
                    </div>
                </div>
            {{/if}}
        </div>
    </div>

    {{#if this.hasMultipleTiers }}
        <div class="gh-dashboard-select">
            <PowerSelect
                @selected={{this.selectedModeOption}}
                @options={{this.modeOptions}}
                @searchEnabled={{false}}
                @onChange={{this.onSwitchMode}}
                @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}}
</div>
