freeCodeCamp/views/api/venmo.jade

extends ../layout

block content
  .page-header
    h2
      i.fa.fa-money
      | Venmo API

  .btn-group.btn-group-justified
    a.btn.btn-primary(href='https://developer.venmo.com/docs/quickstart', target='_blank')
      i.fa.fa-book
      | Quickstart
    a.btn.btn-primary(href='https://developer.venmo.com/docs/api-console', target='_blank')
      i.fa.fa-laptop
      | API Console
    a.btn.btn-primary(href='https://developer.venmo.com/docs/endpoints/payments', target='_blank')
      i.fa.fa-code-fork
      | API Endspoints

  h3 Venmo Profile
  .row
    .col-sm-2
      img(src='#{profile.user.profile_picture_url}')
    .col-sm-8
      .row
        .col-sm-6
          strong  #{profile.user.display_name}
          div Balance:
            strong  $#{profile.balance}
          div Friends:
            strong  #{profile.user.friends_count}
        .col-sm-6
          div Email:
            strong  #{profile.user.email}
          div Phone:
            strong  #{profile.user.phone}
          div ID:
            strong  #{profile.user.id}
      p #{profile.user.about}

  .row
    .col-sm-5
      h3 Make Payment
      form(role='form', method='POST')
        input(type='hidden', name='_csrf', value=token)
        .form-group
          label.control-label(for='user') Phone, Email or Venmo User ID
          input.form-control(type='text', name='user', id='user', placeholder='15555555555', autofocus=true)
        .form-group
          label.control-label(for='note') Note
          input.form-control(type='text', name='note', id='note', placeholder='A message to accompany the payment.')
        .form-group
          label.control-label(for='amount') Amount
          input.form-control(type='text', name='amount', id='amount', placeholder='0.10')
        .form-group
          button.btn.btn-primary(type='submit')
            i.fa.fa-usd
            | Send

  h3 Recent Payments
  table.table.table-striped.table-condensed.table-bordered
    thead
      tr
        th To
        th Amount
        th Status
        th Date
        th Note
    tbody
      if recentPayments.length
        for payment in recentPayments
          tr
            td= payment.target.phone || payment.target.email || payment.target.user
            td $#{payment.amount}
            td= payment.status
            td= payment.date_created
            td= payment.note
      else
        tr
          td(colspan=5) No recent payments.