<ActionCardContainer
  @header="Layout Customization"
  @isComplete={{@isComplete}}
  data-test-layout-customization-is-complete={{@isComplete}}
  class="layout-customization"
>
<ActionCardContainer::Section @title="Customize the layout of your prepaid card">
  {{#if @isComplete}}
    <CardPay::IssuePrepaidCardWorkflow::LayoutCustomization::DisplayView
      @issuerName={{this.issuerName}}
      @colorScheme={{this.colorScheme}}
      @pattern={{this.pattern}}
    />
  {{else}}
    <CardPay::IssuePrepaidCardWorkflow::LayoutCustomization::FormView
      @issuerName={{this.issuerName}}
      @colorSchemeOptions={{this.colorSchemeOptions}}
      @patternOptions={{this.patternOptions}}
      @loadingCustomizations={{not this.cardCustomizationService.loaded}}
      @colorScheme={{this.colorScheme}}
      @updateColorScheme={{this.updateColorScheme}}
      @pattern={{this.pattern}}
      @updatePattern={{this.updatePattern}}
      @onNameInput={{this.onNameInput}}
      @isNameInvalid={{this.isNameInvalid}}
      @nameFieldErrorMessage={{this.nameFieldErrorMessage}}
    />
  {{/if}}

  <div class="layout-customization__disclaimer">
    * The issuer name will be visible to others. Please don’t include any personally identifiable information that you want to keep private.
  </div>
</ActionCardContainer::Section>
  <Boxel::ActionChin
    @state={{this.ctaState}}
    @disabled={{or @frozen this.ctaDisabled}}
    data-test-layout-customization
  >
    <:default as |a|>
      <a.ActionButton
        {{on "click" this.save}}
      >
        Save layout
      </a.ActionButton>
    </:default>
    <:memorialized as |m|>
      <m.ActionButton
        {{on "click" this.edit}}
      >
        Edit
      </m.ActionButton>
    </:memorialized>
  </Boxel::ActionChin>
</ActionCardContainer>