Retrospring/app/views/settings/_profile.haml

.card
  .card-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.avatar-lg.mr-3{ 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.btn.btn-inverse#cropper-zoom-out{ type: :button }
              %i.fa.fa-search-minus
            %button.btn.btn-inverse#cropper-zoom-in{ type: :button }
              %i.fa.fa-search-plus

      .row.mb-2#profile-header-media
        .col
          %img.mw-100.mr-3{ src: current_user.profile_header.url(:mobile) }
        .col-xs-12.mt-3.mt-sm-0.pl-3.pr-3
          = 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.btn.btn-inverse#cropper-header-zoom-out{ type: :button }
              %i.fa.fa-search-minus
            %button.btn.btn-inverse#cropper-header-zoom-in{ 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(profile_picture_x profile_picture_y profile_picture_w profile_picture_h)
        = f.hidden_field attrib, id: attrib

      - for attrib in %i(profile_header_x profile_header_y profile_header_w profile_header_h)
        = f.hidden_field attrib, id: attrib

      = f.submit t('views.actions.save'), class: 'btn btn-primary'