extends ../layout

block content
  .page-header
    h2
      i.fa.fa-instagram
      | Instagram API
  .btn-group.btn-group-justified
    a.btn.btn-primary(href='http://instagram.com/developer/', target='_blank')
      i.fa.fa-check-square-o
      | Overview
    a.btn.btn-primary(href='https://github.com/teleportd/instagram-node', target='_blank')
      i.fa.fa-laptop
      | Node-Instagram Docs
    a.btn.btn-primary(href='http://instagram.com/developer/endpoints/', target='_blank')
      i.fa.fa-code-fork
      | API Endpoints

  br
  p.lead Username Search for
    strong  lisa_veronica
  table.table.table-hover.table-bordered
    thead
      tr
        th Picture
        th Username
        th Full Name
        th Bio
    tbody
      for user in usernames
        tr
          td
            img(src='#{user.profile_picture}', width='75', height='75')
          td= user.username
          td= user.full_name
          td= user.bio

  hr
  p.lead User Search for ID
    strong  175948269


  img.thumbnail(src='#{userById.profile_picture}', width='75', height='75')
  p
    a(href='http://instagram.com/#{userById.username}')
      strong #{userById.full_name}
    br
    | #{userById.bio}

  hr
  p.lead
    strong Popular Images
    |  on Instagram
  .row
    for image in popularImages
      .col-xs-3
        a.thumbnail(href='#{image.link}')
          img(src='#{image.images.standard_resolution.url}', height='320px')
        div.facebook-caption
          i.fa.fa-heart
          |  #{image.likes.count}


  hr
  p.lead
    | My Recent
    strong  Media
  .row
    for image in myRecentMedia
      .col-xs-3
        a.thumbnail(href='#{image.link}')
          img(src='#{image.images.standard_resolution.url}', height='320px')
        div.facebook-caption
          i.fa.fa-heart
          | #{image.likes.count}