.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
              %div.img-rounded.profile--img{style: 'width:100px;height:100px;overflow:hidden;margin-left:5px:'}
                %img#profile-picture-preview{src: current_user.profile_picture.url(:medium), style: 'width: 100%; height: 100%'}
            .media-body
              = f.file_field :profile_picture

          .well#profile-picture-crop-controls{style: 'display: none;'}
            %strong Adjust image
            %img#profile-picture-cropper{src: current_user.profile_picture.url(:medium)}

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

          = f.text_field :website, label: "Website", placeholder: 'http://bad-dragon.com'

          = f.text_field :location, label: "Location", placeholder: 'Germoney'

          = f.text_area :bio, label: "Bio", placeholder: 'In Bio war ich nie gut x--DD'

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

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