gitlab-org--gitlab-foss/app/views/profiles/show.html.haml

- breadcrumb_title s_("Profiles|Edit Profile")
- page_title s_("Profiles|Edit Profile")
- @content_class = "limit-container-width" unless fluid_layout
- gravatar_link = link_to Gitlab.config.gravatar.host, 'https://' + Gitlab.config.gravatar.host
- availability = availability_values
- custom_emoji = show_status_emoji?(@user.status)

= bootstrap_form_for @user, url: profile_path, method: :put, html: { multipart: true, class: 'edit-user gl-mt-3 js-quick-submit gl-show-field-errors' }, authenticity_token: true do |f|
  = form_errors(@user)

  .row
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0
        = s_("Profiles|Public Avatar")
      %p
        - if @user.avatar?
          - if gravatar_enabled?
            = s_("Profiles|You can change your avatar here or remove the current avatar to revert to %{gravatar_link}").html_safe % { gravatar_link: gravatar_link }
          - else
            = s_("Profiles|You can change your avatar here")
        - else
          - if gravatar_enabled?
            = s_("Profiles|You can upload your avatar here or change it at %{gravatar_link}").html_safe % { gravatar_link: gravatar_link }
          - else
            = s_("Profiles|You can upload your avatar here")
        - if current_appearance&.profile_image_guidelines?
          .md
            = brand_profile_image_guidelines
    .col-lg-8
      .clearfix.avatar-image.gl-mb-3
        = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
          = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
      %h5.gl-mt-0= s_("Profiles|Upload new avatar")
      .gl-mt-2.gl-mb-3
        %button.gl-button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
        %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen")
        = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
      .form-text.text-muted= s_("Profiles|The maximum file size allowed is 200KB.")
      - if @user.avatar?
        %hr
        = link_to s_("Profiles|Remove avatar"), profile_avatar_path, data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") }, method: :delete, class: 'gl-button btn btn-danger btn-inverted'

  %hr
  .row
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0= s_("Profiles|Current status")
      %p= s_("Profiles|This emoji and message will appear on your profile and throughout the interface.")
    .col-lg-8
      = f.fields_for :status, @user.status do |status_form|
        - emoji_button = button_tag type: :button,
          class: 'js-toggle-emoji-menu emoji-menu-toggle-button gl-button btn has-tooltip',
          title: s_("Profiles|Add status emoji") do
          - if custom_emoji
            = emoji_icon @user.status.emoji
          %span#js-no-emoji-placeholder.no-emoji-placeholder{ class: ('hidden' if custom_emoji) }
            = sprite_icon('slight-smile', css_class: 'award-control-icon-neutral')
            = sprite_icon('smiley', css_class: 'award-control-icon-positive')
            = sprite_icon('smile', css_class: 'award-control-icon-super-positive')
        - reset_message_button = button_tag type: :button,
          id: 'js-clear-user-status-button',
          class: 'clear-user-status gl-button btn has-tooltip',
          title: s_("Profiles|Clear status") do
          = sprite_icon("close")

        = status_form.hidden_field :emoji, id: 'js-status-emoji-field'
        = status_form.text_field :message,
          id: 'js-status-message-field',
          class: 'form-control input-lg',
          label: s_("Profiles|Your status"),
          prepend: emoji_button,
          append: reset_message_button,
          placeholder: s_("Profiles|What's your status?")
        - if Feature.enabled?(:set_user_availability_status, @user, default_enabled: :yaml)
          .checkbox-icon-inline-wrapper
            = status_form.check_box :availability, { data: { testid: "user-availability-checkbox" }, label: s_("Profiles|Busy"), wrapper_class: 'gl-mr-0 gl-font-weight-bold' }, availability["busy"], availability["not_set"]
            .gl-text-gray-600.gl-ml-5= s_('Profiles|"Busy" will be shown next to your name')
  - if Feature.enabled?(:user_time_settings)
    %hr
    .row.user-time-preferences
      .col-lg-4.profile-settings-sidebar
        %h4.gl-mt-0= s_("Profiles|Time settings")
        %p= s_("Profiles|You can set your current timezone here")
      .col-lg-8
        -# TODO: might need an entry in user/profile.md to describe some of these settings
        -# https://gitlab.com/gitlab-org/gitlab-foss/issues/60070
        %h5= ("Time zone")
        = dropdown_tag(_("Select a timezone"), options: { toggle_class: 'gl-button btn js-timezone-dropdown input-lg', title: _("Select a timezone"), filter: true, placeholder: s_("OfSearchInADropdown|Filter"), data: { data: timezone_data } } )
        %input.hidden{ :type => 'hidden', :id => 'user_timezone', :name => 'user[timezone]', value: @user.timezone }

  %hr
  .row
    .col-lg-4.profile-settings-sidebar
      %h4.gl-mt-0
        = s_("Profiles|Main settings")
      %p
        = s_("Profiles|This information will appear on your profile")
        - if current_user.ldap_user?
          = s_("Profiles|Some options are unavailable for LDAP accounts")
    .col-lg-8
      .row
        = render 'profiles/name', form: f, user: @user
        = f.text_field :id, readonly: true, label: s_('Profiles|User ID'), wrapper: { class: 'col-md-3' }

      = render_if_exists 'profiles/email_settings', form: f
      = f.text_field :skype, class: 'input-md', placeholder: s_("Profiles|username")
      = f.text_field :linkedin, class: 'input-md', help: s_("Profiles|Your LinkedIn profile name from linkedin.com/in/profilename")
      = f.text_field :twitter, class: 'input-md', placeholder: s_("Profiles|@username")
      = f.text_field :website_url, class: 'input-lg', placeholder: s_("Profiles|website.com")
      - if @user.read_only_attribute?(:location)
        = f.text_field :location, readonly: true, help: s_("Profiles|Your location was automatically set based on your %{provider_label} account") % { provider_label: attribute_provider_label(:location) }
      - else
        = f.text_field :location, label: s_('Profiles|Location'), class: 'input-lg', placeholder: s_("Profiles|City, country")
      = f.text_field :job_title, class: 'input-md'
      = f.text_field :organization, label: s_('Profiles|Organization'), class: 'input-md', help: s_("Profiles|Who you represent or work for")
      = f.text_area :bio, label: s_('Profiles|Bio'), rows: 4, maxlength: 250, help: s_("Profiles|Tell us about yourself in fewer than 250 characters")
      %hr
      %h5= s_("Private profile")
      .checkbox-icon-inline-wrapper
        - private_profile_label = capture do
          = s_("Profiles|Don't display activity-related personal information on your profiles")
        = f.check_box :private_profile, label: private_profile_label, inline: true, wrapper_class: 'mr-0'
        = link_to sprite_icon('question-o'), help_page_path('user/profile/index.md', anchor: 'private-profile')
      %h5= s_("Profiles|Private contributions")
      = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
      .help-block
        = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
      .gl-mt-3.gl-mb-3
        = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-success'
        = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-cancel'

.modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
  .modal-dialog
    .modal-content
      .modal-header
        %h4.modal-title
          = s_("Profiles|Position and size your new avatar")
        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _("Close") }
          %span{ "aria-hidden": true } ×
      .modal-body
        .profile-crop-image-container
          %img.modal-profile-crop-image{ alt: s_("Profiles|Avatar cropper") }
        .crop-controls
          .btn-group
            %button.btn.gl-button.btn-confirm{ data: { method: 'zoom', option: '-0.1' } }
              %span
                = sprite_icon('search-minus')
            %button.btn.gl-button.btn-confirm{ data: { method: 'zoom', option: '0.1' } }
              %span
                = sprite_icon('search-plus')
      .modal-footer
        %button.btn.gl-button.btn-confirm.js-upload-user-avatar{ type: 'button' }
          = s_("Profiles|Set new profile picture")