%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), "note-row-#{note.id}", ('system-note' if note.system)], data: { discussion: note.discussion_id } }
  .timeline-entry-inner
    .timeline-icon
      %a{href: user_path(note.author)}
        %img.avatar.s40{src: avatar_icon(note.author), alt: ''}
    .timeline-content
      .note-header
        - if note_editable?(note)
          .note-actions
            = link_to edit_namespace_project_note_path(note.project.namespace, note.project, note), title: 'Edit comment', remote: true, class: 'js-note-edit' do
              = icon('pencil-square-o')

            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'js-note-delete danger' do
              = icon('trash-o')

        - unless note.system
          - access = note.project.team.human_max_access(note.author.id)
          - if access
            %span.note-role.label
              = access

        = link_to_member(note.project, note.author, avatar: false)

        %span.author-username
          = '@' + note.author.username

        %span.note-last-update
          %a{name: dom_id(note), href: "##{dom_id(note)}", title: 'Link here'}
            = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note_created_ago')
          - if note.updated_at != note.created_at
            %span
              ·
              = icon('edit', title: 'edited')
              = time_ago_with_tooltip(note.updated_at, placement: 'bottom', html_class: 'note_edited_ago')
              - if note.updated_by && note.updated_by != note.author
                by #{link_to_member(note.project, note.updated_by, avatar: false, author_class: nil)}

        - if note.superceded?(@notes)
          - if note.upvote?
            %span.vote.upvote.label.label-gray.strikethrough
              = icon('thumbs-up')
              \+1
          - if note.downvote?
            %span.vote.downvote.label.label-gray.strikethrough
              = icon('thumbs-down')
              \-1
        - else
          - if note.upvote?
            %span.vote.upvote.label.label-success
              = icon('thumbs-up')
              \+1
          - if note.downvote?
            %span.vote.downvote.label.label-danger
              = icon('thumbs-down')
              \-1


      .note-body{class: note_editable?(note) ? 'js-task-list-container' : ''}
        .note-text
          = preserve do
            = markdown(note.note, {no_header_anchors: true})

      - if note.attachment.url
        .note-attachment
          - if note.attachment.image?
            = link_to note.attachment.url, target: '_blank' do
              = image_tag note.attachment.url, class: 'note-image-attach'
          .attachment
            = link_to note.attachment.url, target: '_blank' do
              = icon('paperclip')
              = note.attachment_identifier
              = link_to delete_attachment_namespace_project_note_path(note.project.namespace, note.project, note),
                title: 'Delete this attachment', method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: 'danger js-note-attachment-delete' do
                = icon('trash-o', class: 'cred')
      .clear