extends layout

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

  ul.nav.nav-tabs#myTab
    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
      .pahe-header
        h3 Profile Information

      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
          .col-sm-offset-2.col-sm-4
            button.btn.btn.btn-primary(type='submit') Update Profile

    #settings.tab-pane.fade
      .page-header
        h3 Change Password

      form.form-horizontal(action='/account/settings', method='POST')
        .form-group
          label.col-sm-3.control-label(for='password') Password
          .col-sm-4
            input.form-control(type='password', name='password', id='password')
        .form-group
          label.col-sm-3.control-label(for='confirmPassword') Confirm Password
          .col-sm-4
            input.form-control(type='password', name='confirmPassword', id='confirmPassword')
        .form-group
          .col-sm-offset-3.col-sm-4
            button.btn.btn.btn-primary(type='submit') Change Password

      .page-header
        h3 Delete Account

      p You can delete your account, but keep in mind this action is irreversiable.
      form(action='/account/delete', method='POST')
        button.btn.btn-danger(type='submit') Delete my account

      .page-header
        h3 Linked Accounts

      if user.google
        p: a.text-danger(href='/auth/google') Unlink your Google account
      else
        p: a(href='/auth/google') Link your Google account

      if user.facebook
        p: a.text-danger(href='/auth/facebook') Unlink your Facebook account
      else
        p: a(href='/auth/facebook') Link your Facebook account

      if user.twitter
        p: a.text-danger(href='/auth/twitter') Unlink your Twitter account
      else
        p: a(href='/auth/twitter') Link your Twitter account

      if user.github
        p: a.text-danger(href='/auth/github') Unlink your GitHub account
      else
        p: a(href='/auth/github') Link your GitHub account


  script
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');