<section class='card-pay-safe-balances__container' data-test-safe-balances>
  <header
    aria-label='metadata'
    class='card-pay-safe-balances__header'
    style={{css-var
      safe-balances-header-background-color=(or this.data.info.backgroundColor 'var(--boxel-dark)')
      safe-balances-header-text-color=(or this.data.info.textColor 'var(--boxel-light)')
    }}
    data-test-safe-balances-header
  >
    <div class='card-pay-safe-balances__network-and-address'>
      <span class='card-pay-safe-balances__network' data-test-safe-balances-network>
        On {{network-display-info 'layer2' 'shortName'}}
      </span>
      <span class='card-pay-safe-balances__address'>
        {{truncate-middle @safe.address}}
      </span>
    </div>
    <div class='card-pay-safe-balances__type' data-test-safe-balances-type>{{this.safeType}}</div>
  </header>
  <section class='card-pay-safe-balances__body'>
    <header aria-label='title' class='card-pay-safe-balances__title-container' data-test-safe-balances-title>
      {{#if this.data.icon}}
        {{svg-jar this.data.icon width='20' height='20' class='card-pay-safe-balances__logo' data-test-safe-balances-logo=this.data.icon}}
      {{else}}
        <CardPay::MerchantLogo
          class='card-pay-safe-balances__logo'
          @name={{first-char this.data.info.name}}
          @logoBackground={{this.data.info.backgroundColor}}
          @logoTextColor={{this.data.info.textColor}}
        />
      {{/if}}
      <div class='card-pay-safe-balances__title-and-link'>
        <h3 class='card-pay-safe-balances__title' title={{this.data.info.name}}>
          {{this.data.info.name}}
        </h3>
        {{#if this.data.info.id}}
          {{!-- this is currently hidden in CSS as the URLs aren’t valid yet --}}
          <a
            href={{concat 'https://cardstack.xyz/' this.data.info.id}}
            class='card-pay-safe-balances__title-link'
            target='_blank'
            rel='noopener noreferrer'
            data-test-safe-balances-link>
            cardstack.xyz/{{this.data.info.id}}
          </a>
        {{/if}}
      </div>
    </header>
    <h4 class='card-pay-safe-balances__balances-title'>
      <div>
        Balances
        <span class='card-pay-safe-balances__balances-num' data-test-safe-balances-count>
          {{this.tokenBalances.length}}
        </span>
      </div>
      <div class='card-pay-safe-balances__balances-num' data-test-safe-balances-usd-total>
        {{format-usd this.usdBalanceTotal}}
      </div>
    </h4>
    {{#each this.tokenBalances as |b|}}
      <div class='card-pay-safe-balances__token' data-test-safe-balances-token={{b.symbol}}>
        <CardPay::BalanceDisplay
          class='card-pay-safe-balances__token-balance-display'
          @icon={{b.icon}}
          @balance={{format-wei-amount b.balance}}
          @symbol={{b.symbol}}
          @usdBalance={{token-to-usd b.symbol b.balance}}
        />
        <br/>
      </div>
    {{/each}}
  </section>
</section>