<div class="gh-dashboard5-metric {{if @center "is-center"}} {{if @reverse "is-reverse"}} {{if @large "is-large"}}">
    <div class="gh-dashboard5-metric-data">
        {{#if @secondary}}
            {{#if @value}}
                <div class="gh-dashboard5-metric-value {{if @secondary 'is-secondary'}}">
                    {{@value}}
                    {{#if @trends}}
                    <Dashboard::v5::Parts::Percentage @percentage={{@percentage}}/>
                {{/if}}
                </div>
            {{/if}}
            <h5 class="gh-dashboard5-metric-label {{if @secondary 'is-secondary'}}">
                {{@label}}
            </h5>
        {{else}}
            {{#if @reverse}}
                {{#if @value}}
                    <div class="gh-dashboard5-metric-value">
                        {{@value}}
                        {{#if @trends}}
                        <Dashboard::v5::Parts::Percentage @percentage={{@percentage}}/>
                    {{/if}}
                    </div>
                {{/if}}
                <h5 class="gh-dashboard5-metric-label">
                    {{@label}}
                </h5>
            {{else}}
                <h5 class="gh-dashboard5-metric-label">
                    {{@label}}
                </h5>
                {{#if @value}}
                    <div class="gh-dashboard5-metric-value">
                        {{@value}}
                        {{#if @trends}}
                            <Dashboard::v5::Parts::Percentage @percentage={{@percentage}}/>
                        {{/if}}
                    </div>
                {{/if}}
            {{/if}}
        {{/if}}
    </div>
    {{#if @extra}}
        <div class="gh-dashboard5-metric-extra">
            {{@extra}}
        </div>
    {{/if}}
</div>