.container.j2-page
  = render 'settings_tabs'
  .col-md-9.col-xs-12.col-sm-9
    = render 'layouts/messages'
    .panel.panel-default
      .panel-body
        = bootstrap_form_for(current_user, url: {action: "edit"}, :html => { :multipart => true }, method: "patch") do |f|

          = f.text_field :display_name, label: "Your name"

          .media
            .pull-left
              %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
            .media-body
              = f.file_field :profile_picture

          .row#profile-picture-crop-controls{style: 'display: none;'}
            .col-sm-10.col-md-8
              %strong Adjust your new avatar
              %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}
            .col-sm-2.col-md-4
              .btn-group
                %button#cropper-zoom-out.btn.btn-inverse{type: :button}
                  %i.fa.fa-search-minus
                %button#cropper-zoom-in.btn.btn-inverse{type: :button}
                  %i.fa.fa-search-plus

          .media
            .pull-left
              %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
            .media-body
              = f.file_field :profile_header

          .row#profile-header-crop-controls{style: 'display: none;'}
            .col-sm-10.col-md-8
              %strong Adjust your new header
              %img#profile-header-cropper{src: current_user.profile_header.url(:web)}
            .col-sm-2.col-md-4
              .btn-group
                %button#cropper-zoom-out.btn.btn-inverse{type: :button}
                  %i.fa.fa-search-minus
                %button#cropper-zoom-in.btn.btn-inverse{type: :button}
                  %i.fa.fa-search-plus

          = f.text_field :motivation_header, label: "Motivation header", placeholder: 'Ask me anything!'

          = f.text_field :website, label: "Website", placeholder: 'http://example.com'

          = f.text_field :location, label: "Location", placeholder: 'Where are you?'

          = f.text_area :bio, label: "Bio", placeholder: 'Tell us something nice about you!'

          - for attrib in %i(crop_x crop_y crop_w crop_h)
            = f.hidden_field attrib, id: attrib

          - for attrib in %i(crop_h_x crop_h_y crop_h_w crop_h_h)
            = f.hidden_field attrib, id: attrib

          = f.submit "Save settings", class: 'btn btn-primary'