- page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"

= render "projects/merge_requests/show/mr_title"

.merge-request-details.issuable-details
  = render "projects/merge_requests/show/mr_box"

= render 'shared/issuable/sidebar', issuable: @merge_request

#conflicts{"v-cloak" => "true"}
  .loading{"v-if" => "isLoading"}
    %i.fa.fa-spinner.fa-spin

  .content-block.oneline-block{"v-if" => "hasError"}
    %p {{conflictsData.errorMessage}}

  .content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
    .inline-parallel-buttons
      .btn-group
        %a.btn{ |
          ":class" => "{'active': !isParallel}", |
          "@click" => "handleViewTypeChange('inline')"}
          Inline
        %a.btn{ |
          ":class" => "{'active': isParallel}", |
          "@click" => "handleViewTypeChange('parallel')"}
          Side-by-side

    .js-toggle-container
      .commit-stat-summary
        Showing
        %strong.cred {{conflictsCount}} conflicts
        for
        %strong {{conflictsData.source_branch}}
        into
        %strong {{conflictsData.target_branch}}

  .files-wrapper{"v-if" => "!isLoading && !hasError"}
    .files{"v-show" => "isParallel"}
      .diff-file.file-holder.conflict.parallel-view{"v-for" => "file in conflictsData.files"}
        .file-title
          %i.fa.fa-fw.fa{":class" => "file.iconClass"}
          %strong {{file.filePath}}
          .file-actions
            %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
              View file @{{conflictsData.shortCommitSha}}
        .diff-content.diff-wrap-lines
          .diff-wrap-lines.code.file-content.js-syntax-highlight.white
            %table
              %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
                %template{"v-for" => "line in section"}

                  %template{"v-if" => "line.isHeader"}
                    %td.diff-line-num.header{":class" => "{ |
                      'head': line.isHead, |
                      'origin': line.isOrigin, |
                      'selected': line.isSelected, |
                      'unselected': line.isUnselected}"}
                    %td.line_content.header{":class" => "{ |
                      'head': line.isHead, |
                      'origin': line.isOrigin, |
                      'selected': line.isSelected, |
                      'unselected': line.isUnselected}"}
                      %strong {{line.richText}}
                      %button.btn{"@click" => "handleSelected(line.id, line.section)"}
                        {{line.buttonTitle}}

                  %template{"v-if" => "!line.isHeader"}
                    %td.diff-line-num.old_line{":class" => "{ |
                      'head': line.isHead, |
                      'origin': line.isOrigin, |
                      'match': line.hasMatch, |
                      'selected': line.isSelected, |
                      'unselected': line.isUnselected }"}
                      {{line.lineNumber}}
                    %td.line_content.parallel{":class" => "{ |
                      'head': line.isHead, |
                      'origin': line.isOrigin, |
                      'match': line.hasMatch, |
                      'selected': line.isSelected, |
                      'unselected': line.isUnselected }"}
                      {{{line.richText}}}

    .files{"v-show" => "!isParallel"}
      .diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"}
        .file-title
          %i.fa.fa-fw{":class" => "file.iconClass"}
          %strong {{file.filePath}}
          .file-actions
            %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
              View file @{{conflictsData.shortCommitSha}}

        .diff-content.diff-wrap-lines
          .diff-wrap-lines.code.file-content.js-syntax-highlight.white
            %table
              %tr.line_holder{"v-for" => "line in file.inlineLines", |
                ":class" => "{ |
                  'head': line.isHead, |
                  'origin': line.isOrigin, |
                  'match': line.hasMatch, |
                  'selected': line.isSelected, |
                  'unselected': line.isUnselected }"}

                %template{"v-if" => "!line.isHeader"}
                  %td.diff-line-num.new_line
                    %a {{line.new_line}}
                  %td.diff-line-num.old_line
                    %a {{line.old_line}}
                  %td.line_content
                    {{{line.richText}}}

                %template{"v-if" => "line.isHeader"}
                  %td.diff-line-num.header
                  %td.diff-line-num.header
                  %td.line_content.header
                    %strong {{{line.richText}}}
                    %button.btn{"@click" => "handleSelected(line.id, line.section)"}
                      {{line.buttonTitle}}

    .content-block.oneline-block.files-changed
      %strong.resolved-count {{resolvedCount}}
      of
      %strong.total-count {{conflictsCount}}
      conflicts have been resolved

      .commit-message-container.form-group
        .max-width-marker
        %textarea.form-control.js-commit-message{":disabled" => "!allResolved", "v-model" => "conflictsData.commitMessage"}
          {{{conflictsData.commitMessage}}}

      %button{type: "button", class: "btn btn-success js-submit-button", ":disabled" => "!allResolved", "@click" => "commit()"}
        %span Commit conflict resolution
        %a.fa.fa-spin.fa-spinner{":class" => "{'hidden': !isSubmitting}"}

      / FIXME: Hardcoded path
      %a.btn.btn-cancel{"href" => "diffs"}
        Cancel