<div class="layout-display-view__content" data-test-layout-customization-display>
  <Boxel::Field
    @label="Card Preview"
    @fieldMode="view"
    class="layout-display-view__card-preview-field"
  >
    <div class="layout-display-view__card">
      <CardPay::PrepaidCard
        @issuerName={{@issuerName}}
        @headerBackground={{@colorScheme.background}}
        @headerPatternUrl={{@pattern.patternUrl}}
        @headerTextColor={{@colorScheme.textColor}}
        @headerPatternColor={{@colorScheme.patternColor}}
        @mockBalance={{true}}
        @mockOptions={{true}}
        @balance="123456"
        @usdBalance="1234.56"
        @address={{placeholder-address}}
        @network={{network-display-info "layer2" "fullName"}}
      />
    </div>
  </Boxel::Field>
  <CardPay::FieldStack class="layout-display-view__data">
    <CardPay::LabeledValue @vertical={{true}} @label="Issued by*" @value={{@issuerName}}/>
    <CardPay::LabeledValue @vertical={{true}} @label="Background color">
      <CardPay::IssuePrepaidCardWorkflow::LayoutCustomization::Swatch
        @type="background"
        @swatchBackground={{@colorScheme.background}}
      />
    </CardPay::LabeledValue>
    <CardPay::LabeledValue @vertical={{true}} @label="Theme">
      <CardPay::IssuePrepaidCardWorkflow::LayoutCustomization::Swatch
        @type="theme"
        @swatchImage={{@pattern.patternUrl}}
        @blank={{eq @pattern.patternUrl null}}
      />
    </CardPay::LabeledValue>
  </CardPay::FieldStack>
</div>