freeCodeCamp/views/account.jade

extends layout

block content
  h2 Account Settings
  ul.nav.nav-tabs
    li.active
      a(href='#basic', data-toggle='tab') Basic Info
    li
      a(href='#settings', data-toggle='tab') Settings
  .tab-content
    #basic.tab-pane.fade.active.in
      form.form-horizontal(action='/account/profile', method='POST')
        .form-group
          label.col-sm-2.control-label(for='name') Name
          .col-sm-4
            input.form-control(type='text', name='name', id='name', value='#{user.profile.name}')
        .form-group
          label.col-sm-2.control-label(for='name') Gender
          .col-sm-4
            label.radio-inline
              input(checked=user.profile.gender=='Male', name='gender', type='radio', value='Male')
              span Male
            label.radio-inline
              input(checked=user.profile.gender=='Female', name='gender', type='radio', value='Female')
              span Female
        .form-group
          label.col-sm-2.control-label(for='email') Email
          .col-sm-4
            input.form-control(type='email', name='email', id='email', value='#{user.profile.email}')
        .form-group
          label.col-sm-2.control-label(for='location') Location
          .col-sm-4
            input.form-control(type='text', name='location', id='location', value='#{user.profile.location}')
        .form-group
          label.col-sm-2.control-label(for='website') Website
          .col-sm-4
            input.form-control(type='text', name='website', id='website', value='#{user.profile.website}')
        .form-group
          label.col-sm-2.control-label(for='profilePicture') Profile Picture
          .col-sm-8
            .btn.btn-danger.google Use Google
            .btn.btn-primary.facebook Use Facebook
            .btn.btn-info.twitter Use Twitter
            .fileinput.fileinput-new(data-provides='fileinput')
              span.btn.btn-default.btn-file
                span.fileinput-new Select File
                span.fileinput-exists Change
                input(type='file', name='...')
              span.fileinput-filename
              a.close.fileinput-exists(href='#', data-dismiss='fileinput', style='float: none;')  ×
            img(width=100, height=100, src='#{user.profile.picture}')
        .form-group
          button.btn.btn.btn-primary(type='submit') Update Profile






    #settings.tab-pane.fade
      .form-group
        label(for='password') Password
        input.form-control(type='password', name='password', id='password', placeholder='Password')
      .form-group
        label(for='confirmPassword') Confirm Password
        input.form-control(type='password', id='confirmPassword', placeholder='Confirm Password')





  if messages.length
    .alert.alert-danger
      for message in messages
        div= message

  script
    $('.fileinput').fileinput()