%h3.page-title New file
%hr
.file-editor
  = form_tag(project_new_tree_path(@project, @id), method: :put, class: "form-horizontal") do
    .control-group.commit_message-group
      = label_tag 'file_name', class: "control-label" do
        File name
      .controls
        %span.monospace= @path[-1] == "/" ? @path : @path + "/"
        &nbsp;
        = text_field_tag 'file_name', params[:file_name], placeholder: "sample.rb", required: true
        %span
          &nbsp;
          on
          %span.label-branch= @ref

    .control-group.commit_message-group
      = label_tag 'commit_message', class: "control-label" do
        Commit message
      .controls
        = text_area_tag 'commit_message', params[:commit_message], placeholder: "Added new file", required: true, rows: 3

    .file-holder
      .file-title
        %i.icon-file
      .file-content.code
        %pre#editor= params[:content]

    .form-actions
      = hidden_field_tag 'content', '', id: "file-content"
      .commit-button-annotation
        = button_tag "Commit changes", class: 'btn commit-btn js-commit-button btn-create'
        .message
          to branch
          %strong= @ref
      = link_to "Cancel", project_tree_path(@project, @id), class: "btn btn-cancel", confirm: leave_edit_message

:javascript
  ace.config.set("modePath", gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}/ace-src-noconflict")
  var editor = ace.edit("editor");

  disableButtonIfEmptyField("#commit_message", ".js-commit-button");

  $(".js-commit-button").click(function(){
    $("#file-content").val(editor.getValue());
    $(".file-editor form").submit();
  });
