- blob = diff_file.blob
- old_blob = diff_file.old_blob
- blob_raw_path = diff_file_blob_raw_path(diff_file)
- old_blob_raw_path = diff_file_old_blob_raw_path(diff_file)
- click_to_comment = local_assigns.fetch(:click_to_comment, true)
- diff_view_data = local_assigns.fetch(:diff_view_data, '')
- class_name = ''

- if click_to_comment
  - class_name = 'js-add-image-diff-note-button click-to-comment'

.image.js-replaced-image{ data: diff_view_data }
  .two-up.view
    .wrap
      .frame.deleted
        = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
      %p.image-info.hide
        %span.meta-filesize= number_to_human_size(old_blob.size)
        |
        %strong W:
        %span.meta-width
        |
        %strong H:
        %span.meta-height
    .wrap
      = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.new_path }
      %p.image-info.hide
        %span.meta-filesize= number_to_human_size(blob.size)
        |
        %strong W:
        %span.meta-width
        |
        %strong H:
        %span.meta-height

  .swipe.view.hide
    .swipe-frame
      .frame.deleted
        = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
      .swipe-wrap
        = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.new_path }
      %span.swipe-bar
        %span.top-handle
        %span.bottom-handle

  .onion-skin.view.hide
    .onion-skin-frame
      .frame.deleted
        = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
      = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.new_path }
      .controls
        .transparent
        .drag-track
          .dragger{ :style => "left: 0px;" }
        .opaque

.view-modes.hide
  %ul.view-modes-menu
    %li.two-up{ data: { mode: 'two-up' } } 2-up
    %li.swipe{ data: { mode: 'swipe' } } Swipe
    %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin