<ActionCardContainer
  class="transaction-status"
  @header="Token Bridge"
  @isComplete={{@isComplete}}
  data-test-deposit-transaction-status-card
>
  <ActionCardContainer::Section
    @title={{concat "Bridging tokens to " (network-display-info "layer2" "shortName") " blockchain"}}
    @icon={{if @isComplete "success-bordered" "clock"}}
  >
    <Boxel::ProgressSteps
      class="transaction-status__steps"
      @progressSteps={{this.progressSteps}}
      @completedCount={{this.completedStepCount}}
      as |progressStep|
    >
      <div
        class="transaction-status__step-title"
        data-test-token-bridge-step={{progressStep.index}}
        data-test-completed={{progressStep.completed}}
      >
        {{progressStep.title}}
      </div>

      <div class="transaction-status__step-status" data-test-token-bridge-step-status={{progressStep.index}} data-test-token-bridge-step-block-count={{this.blockCount}}>
        {{#if (eq progressStep.index 0)}}
          <Boxel::Button @as="anchor" @size="extra-small" @href={{this.depositTxnViewerUrl}} target="_blank" rel="noopener" data-test-etherscan-button>
            View on Etherscan
          </Boxel::Button>
        {{/if}}
        {{#if (eq progressStep.index 1)}}
          {{#if progressStep.completed}}
            <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>
          {{else if this.blockCountError}}
            <span data-test-deposit-bridging-step-failed>Failed</span>
          {{else if this.displayBridgingSubstate}}
            {{this.bridgingSubstate}} <Boxel::LoadingIndicator class="transaction-status__spinner" />
          {{/if}}
        {{/if}}
        {{#if (eq progressStep.index 2)}}
          {{#if progressStep.completed}}
            <Boxel::Button @as="anchor" @size="extra-small" @href={{this.blockscoutUrl}} target="_blank" rel="noopener" data-test-blockscout-button>
              View on Blockscout
            </Boxel::Button>
          {{else if this.bridgeError}}
            <span data-test-deposit-minting-step-failed>Failed</span>
          {{else if (eq this.completedStepCount progressStep.index)}}
            Processing... <Boxel::LoadingIndicator class="transaction-status__spinner" />
          {{/if}}
        {{/if}}
      </div>
    </Boxel::ProgressSteps>
    {{#if this.showSlowBridgingMessage}}
      <p class='transaction-status__delay' data-test-deposit-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.slowBridgingUrl}} target="_blank" rel="noopener noreferrer">here</a>.
      </p>
    {{/if}}
    {{#if (or this.bridgeError this.blockCountError)}}
      <CardPay::ErrorMessage data-test-deposit-transaction-status-error as |supportURL|>
        There was a problem completing the bridging of your tokens to {{network-display-info "layer2" "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>
