%h1.page-title.gl-font-size-h-display
  = _('New merge request')
= gitlab_ui_form_for [@project, @merge_request], html: { class: 'merge-request-form common-note-form js-requires-input js-quick-submit' } do |f|
  = render "projects/merge_requests/source_and_target", mr: @merge_request
  = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits, presenter: @mr_presenter
  = f.hidden_field :source_project_id
  = f.hidden_field :source_branch
  = f.hidden_field :target_project_id
  = f.hidden_field :target_branch, id: ''

  - if params[:nav_source].present?
    = hidden_field_tag(:nav_source, params[:nav_source])

.mr-compare.merge-request.js-merge-request-new-submit.gl-mt-5{ 'data-mr-submit-action': "#{j params[:tab].presence || 'new'}" }
  - if @commits.empty?
    .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
      .merge-request-tabs-container.gl-display-flex.gl-justify-content-space-between
        .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
            = sprite_icon('chevron-lg-left', size: 12)
          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
            = sprite_icon('chevron-lg-right', size: 12)
          %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
            %li.commits-tab.new-tab
              = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
                = _("Commits")
                = gl_badge_tag @total_commit_count, { size: :sm }, { class: 'gl-tab-counter-badge' }

    #diff-notes-app.tab-content
      #new.commits.tab-pane.active
        .commits-empty.gl-text-left.gl-my-5.gl-text-gray-500
          %p
            = _("There are no commits yet.")
  - else
    .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
      .merge-request-tabs-container.gl-display-flex.gl-justify-content-space-between
        .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
          %button.fade-left{ type: 'button', title: _('Scroll left'), 'aria-label': _('Scroll left') }
            = sprite_icon('chevron-lg-left', size: 12)
          %button.fade-right{ type: 'button', title: _('Scroll right'), 'aria-label': _('Scroll right') }
            = sprite_icon('chevron-lg-right', size: 12)
          %ul.merge-request-tabs.nav.nav-tabs.nav-links.no-top.no-bottom.gl-display-flex.gl-flex-nowrap.gl-m-0.gl-p-0.js-tabs-affix
            %li.commits-tab.new-tab
              = link_to url_for(safe_params), data: {target: 'div#commits', action: 'new', toggle: 'tabvue'} do
                = _("Commits")
                = gl_badge_tag @total_commit_count, { size: :sm }, { class: 'gl-tab-counter-badge' }
            - if @pipelines.any?
              %li.builds-tab
                = link_to url_for(safe_params.merge(action: 'pipelines')), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tabvue'} do
                  = _("Pipelines")
                  = gl_badge_tag @pipelines.size, { size: :sm }, { class: 'gl-tab-counter-badge' }
            %li.diffs-tab
              = link_to url_for(safe_params.merge(action: 'diffs')), data: {target: 'div#diffs', action: 'diffs', toggle: 'tabvue', testid: 'diffs-tab'} do
                = _("Changes")
                = gl_badge_tag @merge_request.diff_size, { size: :sm }, { class: 'gl-tab-counter-badge' }

    #diff-notes-app.tab-content
      #new.commits.tab-pane.active
        = render "projects/merge_requests/commits"
      #diffs.diffs.tab-pane{ class: "gl-m-0!" }
        -# This tab is always loaded via AJAX
      - if @pipelines.any?
        #pipelines.pipelines.tab-pane
          = render 'projects/merge_requests/pipelines', endpoint: url_for(safe_params.merge(action: 'pipelines', format: :json)), disable_initialization: true

  .mr-loading-status
    .loading.hide
      = gl_loading_icon(size: 'md')