<div
  class="payment-request"
  ...attributes
>
  <div class="payment-request__explanation" data-test-payment-request-explanation>
    {{#if (and @canDeepLink (not this.showAsQR))}}
      Please install the Card Wallet app on your mobile phone, then tap on the link below to complete your payment
    {{else}}
      Please install the Card Wallet app on your mobile phone, then scan the QR code below to complete your payment
    {{/if}}
  </div>

  <Boxel::CardContainer
    class="payment-request__body"
  >
  {{#if @merchant.loading}}
    <Boxel::LoadingIndicator data-test-merchant-loading-indicator/>
  {{else if @merchant.errored}}
    <div class="payment-request__address-only" data-test-payment-request-merchant-address>
      <span class="payment-request__merchant-address">
        {{!-- this is intentional to prevent whitespace between the segments --}}
        {{#each this.addressSegments as |segment|}}<span class={{cn payment-request__merchant-address-segment--bold=segment.bold}}>{{segment.text}}</span>{{/each}}
      </span>
      <span class="payment-request__missing-info-message" data-test-payment-request-merchant-info-missing>
        {{svg-jar "failure-bordered" class="payment-request__missing-info-message-icon"}}
        Unable to find business details for this address. Use caution when paying.
      </span>
    </div>
  {{else}}
    <CardPay::Merchant
      @name={{@merchant.name}}
      @logoBackground={{@merchant.backgroundColor}}
      @logoTextColor={{@merchant.textColor}}
      @size="large"
      @vertical={{true}}
    />
  {{/if}}

    {{#if @amount}}
      <div class="payment-request__amount" data-test-payment-request-amount>
        {{@amount}}
      </div>
    {{/if}}
    {{#if (and @amount @secondaryAmount)}}
      <div class="payment-request__secondary-amount" data-test-payment-request-secondary-amount>
        {{@secondaryAmount}}
      </div>
    {{/if}}

    {{#if @canDeepLink}}
      {{!-- this is necessary in case card wallet needs to be used on a separate device --}}
      {{#if this.showAsQR}}
        <div class="payment-request__qr-container">
          <StyledQrCode
            @data={{@paymentURL}}
            @image={{@image}}
            @size={{340}}
            @margin={{15}}
            @backgroundColor="#ffffff"
            @dotType="dots"
            @dotColor="#000"
            @cornerDotType="dot"
            @cornerSquareType="extra-rounded"
            @imageMargin={{5}}
          />
        </div>
      {{else}}
        <Boxel::Button
          class="payment-request__deep-link"
          @as="anchor"
          @kind="primary"
          @size="touch"
          href={{@deepLinkPaymentURL}}
          data-test-payment-request-deep-link
        >
          Pay Business
        </Boxel::Button>
      {{/if}}
      <span class="payment-request__url" data-test-payment-request-url>
        {{@paymentURL}}
      </span>

      <button
        class="payment-request__link-view-toggle"
        type="button"
        {{on "click" (set this "showAsQR" (not this.showAsQR))}}
        data-test-payment-request-link-view-toggle
      >
        {{#if this.showAsQR}}
          Show Payment Link
        {{else}}
          Show as QR Code {{svg-jar "qr-code" width="20" height="20"}}
        {{/if}}
      </button>
    {{else}}
      <div class="payment-request__qr-container">
        <StyledQrCode
          @data={{@paymentURL}}
          @image={{@image}}
          @size={{340}}
          @margin={{15}}
          @backgroundColor="#ffffff"
          @dotType="dots"
          @dotColor="#000"
          @cornerDotType="dot"
          @cornerSquareType="extra-rounded"
          @imageMargin={{5}}
        />
      </div>
      <span class="payment-request__url" data-test-payment-request-url>
        {{@paymentURL}}
      </span>
    {{/if}}
  </Boxel::CardContainer>
</div>