.file-editor
  %ul.nav.nav-tabs.js-edit-mode
    %li.active
      = link_to 'Edit', '#editor'
    %li
      = link_to editing_preview_title(@blob.name), '#preview', 'data-preview-url' => preview_project_edit_tree_path(@project, @id)

  = form_tag(project_edit_tree_path(@project, @id), method: :put, class: "form-horizontal") do
    .file-holder.file
      .file-title
        %i.icon-file
        %span.file_name
          %span.monospace.light #{@ref}:
          = @path
        %span.options
          .btn-group.tree-btn-group
            = link_to "Cancel", @after_edit_path, class: "btn btn-tiny btn-cancel", data: { confirm: leave_edit_message }
      .file-content.code
        %pre.js-edit-mode-pane#editor
        .js-edit-mode-pane#preview.hide
          .center
            %h2
              %i.icon-spinner.icon-spin

    .form-group.commit_message-group
      = label_tag 'commit_message', class: "control-label" do
        Commit message
      .col-sm-10
        = render 'shared/commit_message_container', {textarea: text_area_tag('commit_message', '',
            placeholder: "Update #{@blob.name}", required: true, rows: 3, class: 'form-control')}
    .form-actions
      = hidden_field_tag 'last_commit', @last_commit
      = hidden_field_tag 'content', '', id: "file-content"
      = hidden_field_tag 'from_merge_request_id', params[:from_merge_request_id]
      .commit-button-annotation
        = button_tag "Commit changes", class: 'btn commit-btn js-commit-button btn-primary'
        .message
          to branch
          %strong= @ref
      = link_to "Cancel", @after_edit_path, class: "btn btn-cancel", data: { confirm: leave_edit_message}

:javascript
  ace.config.set("modePath", gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}/ace")
  var ace_mode = "#{@blob.language.try(:ace_mode)}";
  var editor = ace.edit("editor");
  editor.setValue("#{escape_javascript(@blob.data)}");
  if (ace_mode) {
    editor.getSession().setMode('ace/mode/' + ace_mode);
  }

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

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

  var editModePanes = $('.js-edit-mode-pane'),
      editModeLinks = $('.js-edit-mode a');

  editModeLinks.click(function(event) {
    event.preventDefault();

    var currentLink = $(this),
        paneId = currentLink.attr('href'),
        currentPane = editModePanes.filter(paneId);

    editModeLinks.parent().removeClass('active hover');
    currentLink.parent().addClass('active hover');
    editModePanes.hide();

    if (paneId == '#preview') {
      currentPane.fadeIn(200);
      $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) {
        currentPane.empty().append(response);
      })
    } else {
      currentPane.fadeIn(200);
      editor.focus()
    }
  })