<Boxel::OrgHeader
  @title={{@title}}
  @iconURL={{@logoURL}}
  class="card-pay-header"
  data-test-card-pay-header
>
  <ul class="card-pay-header__item-list">
    <li class="card-pay-header__item" data-test-card-pay-layer-1-connect>
      <CardPay::Header::ConnectionButton
        @label="Layer 1"
        @chainName={{@layer1ChainName}}
        @address={{@layer1Address}}
        @isInitializing={{@isLayer1Initializing}}
        @isConnected={{@isLayer1Connected}}
        @onConnect={{@layer1Connect}}
      />
    </li>
    <li class="card-pay-header__item" data-test-card-pay-layer-2-connect>
      <CardPay::Header::ConnectionButton
        @label="Layer 2"
        @chainName={{@layer2ChainName}}
        @address={{@layer2Address}}
        @isInitializing={{@isLayer2Initializing}}
        @isConnected={{@isLayer2Connected}}
        @onConnect={{@layer2Connect}}
      />
    </li>
    {{#if (and @isLayer1Connected @isLayer2Connected)}}
      <li class="card-pay-header__item">
        <CardPay::Header::WorkflowTracker />
      </li>
    {{/if}}
  </ul>
</Boxel::OrgHeader>