.card
  .card-body
    = bootstrap_form_for(current_user, url: settings_profile_picture_path, html: { multipart: true }, method: :patch, data: { turbo: false }) do |f|

      %div{ data: { controller: "cropper", cropper_aspect_ratio_value: "1"}}
        .d-flex
          .flex-shrink-0
            %img.avatar-lg.me-3{ src: current_user.profile_picture.url(:medium) }
          .flex-grow-1
            = f.file_field :profile_picture, accept: APP_CONFIG[:accepted_image_formats].join(","), data: { cropper_target: "input", action: "cropper#change" }

        .row.d-none{ data: { cropper_target: "controls" } }
          .col-sm-10.col-md-8
            %strong= t(".adjust.profile_picture")
            %img{ src: current_user.profile_picture.url(:medium), data: { cropper_target: "cropper" } }

        - %i[profile_picture_x profile_picture_y profile_picture_w profile_picture_h].each do |attrib|
          = f.hidden_field attrib, id: attrib, data: { cropper_target: attrib.to_s.split("_").last }

      %div{ data: { controller: "cropper", cropper_aspect_ratio_value: "0.23"}}
        .row.mb-2
          .col-xs-12.col-md-6
            %img.mw-100.me-3{ src: current_user.profile_header.url(:mobile) }
          .col-xs-12.col-md-6.mt-3.mt-sm-0.ps-3.pe-3
            = f.file_field :profile_header, accept: APP_CONFIG[:accepted_image_formats].join(","), data: { cropper_target: "input", action: "cropper#change" }

        .row.d-none{ data: { cropper_target: "controls" } }
          .col-sm-10.col-md-8
            %strong= t(".adjust.profile_header")
            %img{ src: current_user.profile_header.url(:web), data: { cropper_target: "cropper" } }

        - %i[profile_header_x profile_header_y profile_header_w profile_header_h].each do |attrib|
          = f.hidden_field attrib, id: attrib, data: { cropper_target: attrib.to_s.split("_").last }

      = f.check_box :show_foreign_themes

      = f.primary t(".submit_picture")
.card
  .card-body
    = bootstrap_form_for(current_user.profile, html: { multipart: true }, method: :patch, data: { turbo: false }) do |f|

      = f.text_field :display_name, autocomplete: :name

      = f.text_field :motivation_header

      = f.text_field :anon_display_name, placeholder: APP_CONFIG["anonymous_name"], autocomplete: :off

      = f.url_field :website, autocomplete: :url

      = f.text_field :location, autocomplete: "address-level2"

      = f.text_area :description

      = f.check_box :allow_long_questions

      = f.primary

- provide(:title, generate_title(t(".title")))
- parent_layout "user/settings"