freeCodeCamp/views/api/facebook.jade

extends ../layout

block content
  .page-header
    h2
      i.fa.fa-facebook-square(style='color: #335397')
      | Facebook API

  .btn-group.btn-group-justified
    a.btn.btn-primary(href='https://developers.facebook.com/docs/graph-api/quickstart/', target='_blank')
      i.fa.fa-check-square-o
      | Quickstart
    a.btn.btn-primary(href='https://developers.facebook.com/tools/explorer', target='_blank')
      i.fa.fa-facebook
      | Graph API Explorer
    a.btn.btn-primary(href='https://developers.facebook.com/docs/graph-api/reference/', target='_blank')
      i.fa.fa-code-fork
      | API Reference

  h2 /me
  img(src='https://graph.facebook.com/#{me.id}/picture?type=large', width='90', height='90')
  h4= me.name
  h6 First Name: #{me.first_name}
  h6 Last Name: #{me.last_name}
  h6 Gender: #{me.gender}
  h6 Username: #{me.username}
  h6 Link: #{me.link}
  h6 Email: #{me.email}
  h6 Locale: #{me.locale}
  h6 Timezone: #{me.timezone}

  h2 /me/friends
  .row
    for friend in friends
      .col-xs-3.col-md-2
        a.thumbnail(href='http://facebook.com/#{friend.id}')
          img(src='https://graph.facebook.com/#{friend.id}/picture?width=150&height=150')
          div.facebook-caption= friend.name