<ActionCardContainer
  @header="Withdrawal"
  @isComplete={{@isComplete}}
  data-test-withdrawal-choose-balance
  data-test-withdrawal-choose-balance-is-complete={{@isComplete}}
>
  <ActionCardContainer::Section>
    <ActionCardContainer::Section @title="Choose a source and balance to withdraw from">
      <CardPay::LabeledValue @label="Source:" @isCompact={{true}}>
        <CardPay::AccountDisplay @name={{concat (network-display-info "layer2" "fullName") " wallet"}} data-test-choose-balance-from-wallet />
        <CardPay::NestedItems @noInnerBorder={{not @isComplete}} class="choose-balance__nested-items">
          <:outer>
            <CardPay::AccountDisplay
              {{!-- class="transaction-setup__account" --}}
              @size="small"
              @address={{truncate-middle this.layer2Network.walletInfo.firstAddress}}
              data-test-choose-balance-from-address
            />
          </:outer>
          <:inner>
            {{#if @isComplete}}
              <CardPay::AccountDisplay
                @size="small"
                @icon={{this.selectedSafe.type}}
                @name={{uppercase this.selectedSafe.type}}
                @address={{truncate-middle this.selectedSafe.address}}
              />
            {{else}}
              <CardPay::SafeChooserDropdown
                @safes={{this.compatibleSafes}}
                @selectedSafe={{this.selectedSafe}}
                @onChooseSafe={{this.chooseSafe}}
                data-test-choose-balance-from-safe
              />
            {{/if}}
          </:inner>
          <:innermost>
            {{#if @isComplete}}
              <CardPay::BalanceDisplay
                @label="Available Balance"
                @size="large"
                @icon={{this.selectedToken.icon}}
                @balance={{format-wei-amount this.selectedToken.balance}}
                @symbol={{this.selectedToken.symbol}}
                data-test-choose-balance-from-display
              />
            {{else}}
              <div class="choose-balance__dropdown-container">
                <CardPay::BalanceChooserDropdown
                  @tokens={{this.tokens}}
                  @selectedToken={{this.selectedToken}}
                  @selectedTokenSymbol={{this.selectedTokenSymbol}}
                  @chooseToken={{this.chooseBalance}}
                />
              </div>
            {{/if}}
          </:innermost>
        </CardPay::NestedItems>
      </CardPay::LabeledValue>
    </ActionCardContainer::Section>
    <ActionCardContainer::Section @title="Receive tokens*" data-test-choose-balance-receive>
      <CardPay::LabeledValue @label="In:" @isCompact={{true}}>
        <CardPay::AccountDisplay
          @name={{concat (network-display-info "layer1" "fullName") " wallet"}}
          @address={{this.layer1Network.walletInfo.firstAddress}}
        />
      </CardPay::LabeledValue>
    </ActionCardContainer::Section>
    <div class="choose-balance__footnote" data-test-choose-balance-footnote>
      * You will need to pay the gas fee with your Layer 1 wallet on {{network-display-info "layer1" "fullName"}}
      to claim tokens once they are bridged. Make sure you have enough ETH for gas payment before bridging, as this is not reversible.
    </div>
  </ActionCardContainer::Section>
  <Boxel::ActionChin
    @state={{if @isComplete "memorialized" "default"}}
    @disabled={{or @frozen this.isDisabled}}
  >
    <:default as |d|>
      <d.ActionButton {{on "click" this.save}}>
        Continue
      </d.ActionButton>
    </:default>
    <:memorialized as |m|>
      <m.ActionButton {{on "click" @onIncomplete}}>
        Edit
      </m.ActionButton>
    </:memorialized>
  </Boxel::ActionChin>
</ActionCardContainer>