- hidden_topics_field_id = 'project_topic_list_field'
= form_for [@project], html: { multipart: true, class: "edit-project js-general-settings-form" }, authenticity_token: true do |f|
  %input{ name: 'update_section', type: 'hidden', value: 'js-general-settings' }

  %fieldset
    .row
      .form-group.col-md-5
        = f.label :name, class: 'label-bold', for: 'project_name_edit' do
          = _('Project name')
        = f.text_field :name, class: 'form-control gl-form-input', id: "project_name_edit", data: { qa_selector: 'project_name_field' }

      .form-group.col-md-7
        = f.label :id, class: 'label-bold' do
          = _('Project ID')
        = f.text_field :id, class: 'form-control gl-form-input w-auto', readonly: true

    .row
      .form-group.col-md-9
        = f.label :topics, _('Topics'), class: 'label-bold'
        .js-topics-selector{ data: { hidden_input_id: hidden_topics_field_id } }
        = f.hidden_field :topics, value: @project.topic_list.join(', '), id: hidden_topics_field_id

    .row
      .form-group.col-md-9
        = f.label :description, _('Project description (optional)'), class: 'label-bold'
        = f.text_area :description, class: 'form-control gl-form-input', rows: 3, maxlength: 250

  .row= render_if_exists 'projects/classification_policy_settings', f: f

  = render_if_exists 'shared/repository_size_limit_setting', form: f, type: :project

  .form-group.gl-mt-3.gl-mb-3
    .avatar-container.rect-avatar.s90
      = project_icon(@project, alt: _('Project avatar'), class: 'avatar project-avatar s90')
    = f.label :avatar, _('Project avatar'), class: 'label-bold d-block'
    = render 'shared/choose_avatar_button', f: f
    - if @project.avatar?
      %hr
      = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'gl-button btn btn-danger-secondary'

  = f.submit _('Save changes'), class: "gl-button btn btn-confirm gl-mt-6", data: { qa_selector: 'save_naming_topics_avatar_button' }