- provide(:title, generate_title("Profile Settings"))
.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: t('views.settings.profile.displayname')

          .media#profile-picture-media
            .pull-left
              %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)}
            .media-body
              = f.file_field :profile_picture, label: t('views.settings.profile.avatar')

          .row#profile-picture-crop-controls{style: 'display: none;'}
            .col-sm-10.col-md-8
              %strong= t('views.settings.profile.avatar_adjust')
              %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#profile-header-media
            .pull-left
              %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)}
            .media-body
              = f.file_field :profile_header, label: t('views.settings.profile.header')

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

          = f.text_field :motivation_header, label: t('views.settings.profile.motivation'), placeholder: t('views.settings.profile.placeholder.motivation')

          = f.text_field :website, label: t('views.settings.profile.website'), placeholder: 'https://example.com'

          = f.text_field :location, label: t('views.settings.profile.location'), placeholder: t('views.settings.profile.placeholder.location')

          = f.text_area :bio, label: t('views.settings.profile.bio'), placeholder: t('views.settings.profile.placeholder.bio')

          = f.check_box :show_foreign_themes, label: 'Render other user themes when visiting their profile'

          - 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 t('views.actions.save'), class: 'btn btn-primary'