<ActionCardContainer
  class="transaction-status"
  @header="Token bridge"
  @isComplete={{@isComplete}}
  data-test-withdrawal-transaction-confirmed-is-complete={{@isComplete}}
>
  <ActionCardContainer::Section
    @title={{concat "Bridging tokens to " (network-display-info "layer1" "fullName")}}
    @icon={{if this.isInProgress "clock" "success-bordered"}}
    @dataTestId="withdrawal-confirmed"
  >
    <Boxel::ProgressSteps
      class="transaction-status__steps"
      @progressSteps={{this.progressSteps}}
      @completedCount={{this.completedCount}}
      as |progressStep|
    >
      <span
        class="transaction-status__step-title"
        data-test-token-bridge-step={{progressStep.index}}
        data-test-completed={{progressStep.completed}}
      >
        {{progressStep.title}}
      </span>

      <span class="transaction-status__step-status" data-test-token-bridge-step-status={{progressStep.index}} data-test-withdrawal-bridging-block-count={{this.blockCount}}>
        {{#if (eq progressStep.index 0)}}
          <Boxel::Button @as="anchor" @size="extra-small" @href={{this.blockscoutUrl}} target="_blank" rel="noopener" data-test-blockscout-button>
            View on Blockscout
          </Boxel::Button>
        {{/if}}
        {{#if (eq progressStep.index 1)}}
          {{#if this.error}}
            <span data-test-withdrawal-bridging-failed>Failed</span>
          {{else if this.showBridgingSubstate}}
            {{this.bridgingSubstate}} <Boxel::LoadingIndicator class="transaction-status__spinner" />
          {{else}}
            <Boxel::Button @as="anchor" @size="extra-small" @href={{this.bridgeExplorerUrl}} target="_blank" rel="noopener" data-test-bridge-explorer-button>
              View in Bridge Explorer
            </Boxel::Button>
          {{/if}}
        {{/if}}
      </span>
    </Boxel::ProgressSteps>
    {{#if this.showSlowBridgingMessage}}
      <p class='transaction-status__delay' data-test-withdrawal-transaction-status-delay>
        Due to network conditions this transaction is taking longer to confirm,
        you can check the status of the transaction
        <a href={{this.bridgeExplorerUrl}} target="_blank" rel="noopener noreferrer">here</a>.
      </p>
    {{/if}}
    {{#if this.error}}
      <CardPay::ErrorMessage data-test-withdrawal-transaction-status-error as |supportURL|>
        There was a problem completing the bridging of your tokens to {{network-display-info "layer1" "fullName"}}. Please contact <a href={{supportURL}} target="_blank" rel="noopener noreferrer">Cardstack support</a> so that we can investigate and resolve this issue for you.
      </CardPay::ErrorMessage>
    {{/if}}
  </ActionCardContainer::Section>
</ActionCardContainer>
