.note-form-holder
  = form_for [@project, @note], remote: "true", multipart: true do |f|
    %h3.page_title Leave a comment
    -if @note.errors.any?
      .alert-message.block-message.error
        - @note.errors.full_messages.each do |msg|
          %div= msg

    = f.hidden_field :noteable_id
    = f.hidden_field :noteable_type
    = f.text_area :note, size: 255, class: 'note-text gfm-input'
    #preview-note.preview_note.hide
    .hint
      .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
      .clearfix

    .row.note_advanced_opts
      .span3
        = f.submit 'Add Comment', class: "btn success submit_note grouped", id: "submit_note"
        = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link'
      .span4.notify_opts
        %h6.left Notify via email:
        = label_tag :notify do
          = check_box_tag :notify, 1, @note.noteable_type != "Commit"
          %span Project team

        - if @note.notify_only_author?(current_user)
          = label_tag :notify_author do
            = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
            %span Commit author
      .span5.attachments
        %h6.left Attachment:
        %span.file_name File name...

        .input.input_file
          %a.file_upload.btn.small Upload File
          = f.file_field :attachment, class: "input-file"
        %span.hint Any file less than 10 MB

:javascript
  $(function(){
    // init auto-completion of team members
    var membersUrl = "#{root_url}/api/v2/projects/#{@project.code}/members";
    var membersParams = {
      private_token: "#{current_user.authentication_token}",
      page: 1,
    };
    var membersData = [];
    $('.gfm-input').atWho('@', function(query, callback) {
      (function getMoreMembers() {
        $.getJSON(membersUrl, membersParams).
          success(function(members) {
            // pick the data we need
            var newMembersData = $.map(members, function(member) { return member.name });

            // add the new page of data to the rest
            $.merge(membersData, newMembersData);

            // show the pop-up with a copy of the current data
            callback(membersData.slice(0));

            // are we past the last page?
            if (newMembersData.length == 0) {
              // set static data and stop callbacks
              $('.gfm-input').atWho('@', { data: membersData, callback: null });
            } else {
              // get next page
              getMoreMembers();
            }
          });
        // next request will get the next page
        membersParams.page += 1;
      })();
    });

    // init auto-completion of emoji
    var emoji = #{emoji_for_completion};
    // convert the list so that the items have the right format for completion
    emoji = $.map(emoji, function(value) {return { key: value+':', name: value }});
    $('.gfm-input').atWho(':', {
      data: emoji,
      tpl: "<li data-value='${key}'>${name} #{escape_javascript image_tag('emoji/${name}.png', :size => '20x20')}</li>"
    });
  });