extends ../layouts/main
block content

  include components/profile-picture
  include ../handcash/components/public-profile

  section.uk-section.uk-section-default
    .uk-container
      .uk-margin-medium
        div(uk-grid).uk-grid-small.uk-flex-middle.no-select
          .uk-width-auto
            +renderProfilePicture(user, { iconClass: 'sb-small' })

          .uk-width-expand
            h1.uk-margin-remove= user.displayName || user.username || user.email
            if user.bio
              .markdown-block.uk-text-truncate!= marked.parse(user.bio)

      .uk-margin-medium
        h2.sr-only Account Services
        div(class="uk-flex-around uk-flex-between@m", uk-grid)
          .uk-width-auto
            a(href=`/user/${userProfile._id}/settings`).uk-button.dtp-button-primary.uk-border-rounded
              span
                i.fas.fa-cog
              span.uk-margin-small-left Settings

          .uk-width-auto
            a(href='/sticker').uk-button.dtp-button-secondary.uk-border-rounded
              span
                i.far.fa-image
              span.uk-margin-small-left Manage Stickers

          .uk-width-auto
            a(href=`/user/${userProfile._id}/redeem/channel-pass`).uk-button.dtp-button-secondary.uk-border-rounded
              span
                i.fas.fa-bullhorn
              span.uk-margin-small-left Redeem Pass

          .uk-width-auto
            a(href=`/user/${userProfile._id}/block`).uk-button.dtp-button-secondary.uk-border-rounded
              span
                i.fas.fa-ban
              span.uk-margin-small-left Block List

      -
        var haveStripe = user.tokens && user.tokens.stripe;
        var haveHandCash = handcash && handcash.profile;

      if haveStripe || haveHandCash
        .uk-margin-medium
          h2.sr-only Payment Services
          div(uk-grid).uk-grid-match
            if haveStripe
              div(class="uk-width-1-1 uk-width-1-2@m")
                .uk-card.uk-card-secondary.uk-card-small.uk-flex.uk-flex-column.uk-flex-stretch
                  .uk-card-header.uk-flex-none
                    h3.uk-card-title
                      div(uk-grid).uk-grid-small
                        .uk-width-auto
                          i.fab.fa-cc-stripe
                        .uk-width-expand Customer Portal
                  .uk-card-body.uk-flex-1
                    p Access your Stripe Customer Portal to manage your subscription(s), payment methods, and customer profile.
                    p You may be required to log in or otherwise prove your identity when accessing the Stripe Customer Portal.
                    p Please email #[a(href="mailto:support@digitaltelepresence.com") support@digitaltelepresence.com] if you are having a problem here at #{site.name} that isn't related to Stripe or payments.
                  .uk-card-footer.uk-flex-none
                    a(
                      href=`/user/${userProfile._id}/stripe/customer-portal`,
                      uk-tooltip={ title: 'Manage your Stripe profile and details' },
                    ).uk-button.dtp-button-default.uk-border-rounded
                      span Go To Customer Portal

            if haveHandCash
              div(class="uk-width-1-1 uk-width-1-2@m")
                .uk-card.uk-card-secondary.uk-card-small.uk-flex.uk-flex-column.uk-flex-stretch
                  .uk-card-header.uk-flex-none
                    h3.uk-card-title
                      div(uk-grid).uk-grid-small
                        .uk-width-auto
                          img(src="/img/payment/handcash-monogram.green.svg", style="height: 1em; width: auto;")
                        .uk-width-expand HandCash Web Wallet
                  .uk-card-body.uk-flex-1
                    p You have connected your HandCash web wallet with #{site.name} for the easiest and fastest payments possible.
                    +renderHandcashPublicProfile(handcash.profile.publicProfile)
                  .uk-card-footer.uk-flex-none
                    .uk-margin
                      a(
                        href="https://market.handcash.io/my-account/balance",
                        target="_blank",
                        uk-tooltip={ title: 'Manage your HandCash web wallet' },
                      ).uk-button.dtp-button-default.uk-border-rounded
                        span Go To Wallet

          .uk-margin-medium.uk-text-small.uk-text-muted You have used or connected with the payment services shown here. These convenience links help you manage those accounts, your subscriptions, payment methods, profile(s) and other details.