{{page-title "Wallet"}}

<section class="card-pay-dashboard__wallet" role="tabpanel" aria-labelledby="card-pay.wallet">
  <CardPay::DashboardPanel @panel={{@model.panel}} @noBottomPadding={{true}} @noCollapse={{or (not this.layer2Network.isConnected) (is-empty this.prepaidCards)}}>
    <:detail>
      {{#each @model.panel.sections as |section|}}
        <CardPay::DashboardPanel::Section @section={{section}} class="dashboard-panel-section-wallet">
          <:cta>
            <Boxel::Button
              {{on "click" (fn this.transitionToWallet section.workflow)}}
              @kind="primary"
              @size="touch"
              @disabled={{section.isCtaDisabled}}
              data-test-workflow-button={{section.workflow}}
            >
              {{section.cta}}
            </Boxel::Button>

            <small class="dashboard-panel-section__disclaimer">
              This is possible if you have a balance of {{network-display-info "layer2" "daiToken"}} in your Card Wallet.
              (You can <LinkTo @route="card-pay.deposit-withdrawal">deposit DAI</LinkTo>
              from your {{network-display-info "layer1" "conversationalName"}} wallet to get a balance of {{network-display-info "layer2" "daiToken"}} in your Card Wallet.)
            </small>

            <div class="dashboard-panel-section-wallet__cards">
              <img src="/images/dashboard/cards@3x.webp" alt="Stack of Cardstack prepaid cards">
            </div>
          </:cta>
        </CardPay::DashboardPanel::Section>
      {{/each}}

      <section class="dashboard-panel-section">
        <div class="dashboard-panel-section__body">
          <p class="dashboard-panel-section__desc">
            {{svg-jar "card-wallet-app-icon" alt="" role="presentation" height="58"}}
            <h3 class="dashboard-panel-section__title">Buy a prepaid card</h3>
            <p class="dashboard-panel-section__desc">You can buy a prepaid card directly in the Card Wallet mobile application.</p>
            <div class="card-pay-dashboard__wallet-badges">
              <div>
                <a href={{this.testFlightLink}} target="_blank" rel="noopener noreferrer"><img src="/images/icons/download-on-the-app-store-badge.png" alt="Download on the App Store"></a>
              </div>
              <div>
                <img src="/images/icons/google-play-badge.png" class="card-pay-dashboard__wallet-badges-google-play-badge" alt="Get it on Google Play">
                <div class="card-pay-dashboard__wallet-badges-google-play-soon">Coming Soon</div>
              </div>
            </div>
            <img src="/images/dashboard/prepaid-card-phone.png" alt="Screenshot of Card Wallet app showing screen to purchase a prepaid card" class="card-pay-dashboard__wallet-purchase-card-phone">
          </p>
        </div>
      </section>
    </:detail>
    <:footer>
      <div class="card-pay-dashboard__wallet-panel-footer-content">
        {{svg-jar "discord-logo-color"
          role="presentation"
          alt="Discord"
          width="50"
          height="24"
        }}
        +
        {{svg-jar "cardstack-logo"
          role="presentation"
          alt="Cardstack"
          width="40"
          height="26"
        }}
        Get a $10 prepaid card when you download the Card Wallet app and join the <strong>Cardstack community Discord</strong>
        <a href="https://discord.gg/cardstack" target="_blank" rel="noopener noreferrer">Claim your invite &gt;</a>
      </div>
    </:footer>
  </CardPay::DashboardPanel>

  {{#if this.layer2Network.isConnected}}
    <section data-test-card-balances>
      <h3 class="card-pay-dashboard__wallet-title">Wallet</h3>
      <section class="card-pay-dashboard__wallet-section">
        <header class="card-pay-dashboard__wallet-section-header">
          <h4 class="card-pay-dashboard__wallet-section-title">
            Prepaid Cards
            <span class="card-pay-dashboard__wallet-count" data-test-prepaid-cards-count>{{this.prepaidCards.length}}</span>
          </h4>

          {{#let @model.panel.sections.lastObject as |section|}}
            <Boxel::Button
              {{on "click" (fn this.transitionToWallet section.workflow)}}
              @kind="secondary-dark"
              @size="small"
              @disabled={{section.isCtaDisabled}}
              @route="card-pay.wallet"
              data-test-workflow-button={{section.workflow}}
            >
              <span>{{section.cta}}</span>
              {{svg-jar "plus"
                class="card-pay-dashboard__wallet-section-header-button-icon"
                role="presentation"
              }}
            </Boxel::Button>
          {{/let}}
        </header>

        <section class="card-pay-dashboard__wallet-cards">
          {{#each this.prepaidCards as |prepaidCard|}}
            <CardPay::PrepaidCardSafe @safe={{prepaidCard}} />
          {{/each}}
        </section>
      </section>
    </section>
  {{/if}}
</section>

<Boxel::Modal
  @size="large"
  @isOpen={{eq this.flow 'issue-prepaid-card'}}
  @onClose={{this.resetQueryParams}}
>
  {{#if (is-network-initialized)}}
    <CardPay::IssuePrepaidCardWorkflow @onClose={{this.resetQueryParams}} />
  {{/if}}
</Boxel::Modal>