{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

{{! Template displays a title, description and yielded custom subheader (for items like a dropdown or toggle) above a table or data visualizations. 
Data visualizations render in in a flex row with a 1/3-width left element and a 2/3-width right element (with the @legend centered below, if present).
 }}

<Hds::Card::Container class="counts-card-container" data-test-card={{@title}} ...attributes>
  <div class="has-bottom-margin-xl">
    {{#if @title}}
      <Hds::Text::Display @tag="h2" @size="300" class="has-bottom-margin-xs">{{@title}}</Hds::Text::Display>
    {{/if}}
    {{#if @description}}
      <Hds::Text::Body @tag="p" @size="100" @color="faint">{{@description}}</Hds::Text::Body>
    {{/if}}
    {{#if (has-block "subheader")}}
      {{yield to="subheader"}}
    {{/if}}
  </div>

  {{#if (has-block "table")}}
    {{yield to="table"}}
  {{else}}
    <div class="chart-flex-row">
      <div class="item-left">
        {{#if (has-block "dataLeft")}}
          {{yield to="dataLeft"}}
        {{/if}}
      </div>

      <div class="item-right">
        {{#if (has-block "dataRight")}}
          {{yield to="dataRight"}}
        {{/if}}

        {{#if @legend}}
          <div class="legend-container" data-test-counts-card-legend>
            {{#each @legend as |l idx|}}
              <div class="legend-item">
                {{#if (includes l.key (array "clients" "new_clients"))}}
                  <span class="dots legend-dot-total"></span>
                {{else}}
                  <span class="dots legend-dot-{{idx}}"></span>
                {{/if}}
                <Hds::Text::Body @tag="p" @size="100">{{l.label}}</Hds::Text::Body>
              </div>
            {{/each}}
          </div>
        {{/if}}
      </div>
    </div>
  {{/if}}
</Hds::Card::Container>