= form_for [@project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new_note js-new-note-form common-note-form" }, authenticity_token: true do |f|
  = note_target_fields
  = f.hidden_field :commit_id
  = f.hidden_field :line_code
  = f.hidden_field :noteable_id
  = f.hidden_field :noteable_type

  %ul.nav.nav-tabs
    %li.active
      = link_to '#note-write-holder', class: 'js-note-write-button' do
        Write
    %li
      = link_to '#note-preview-holder', class: 'js-note-preview-button', data: { url: preview_project_notes_path(@project) } do
        Preview
  %div
    .note-write-holder
      = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input markdown-area'

      .light.clearfix
        .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"), target: '_blank'}
        .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector' }.

    .note-preview-holder.hide
      .js-note-preview

  .note-form-actions
    .buttons
      = f.submit 'Add Comment', class: "btn comment-btn btn-grouped js-comment-button"
      = yield(:note_actions)
      %a.btn.grouped.js-close-discussion-note-form Cancel

    .note-form-option
      %a.choose-btn.btn.js-choose-note-attachment-button
        %i.icon-paper-clip
        %span Choose File ...
       
      %span.file_name.js-attachment-filename File name...
      = f.file_field :attachment, class: "js-note-attachment-input hidden"

:javascript
  window.project_image_path_upload = "#{upload_image_project_path @project}";