.page-article{class: "page_#{@page.id}", 
  data: {parent_id: params[:parent_id], type: @page.type.parameterize}}
  %h3.edit-helper.hide Title
  %h1#wiki-title.wiki-title= @page.title
  .meta.row
    .col-md-8
      = render 'tags'
    .col-md-4
      = render 'last_updated'

  %h3.edit-helper.hide Body
  #wiki-content.wiki-content.content-description
    ~raw @page.body

- if params[:markdown].present?
  %textarea#markdown_body{rows: 10, cols: 60}

.wiki-actions

:coffeescript
  $ ->
    window.enable_edit = enable_edit = ->
      $(".edit-helper").toggleClass("hide")
      tinymce.init
        selector: "h1.wiki-title"
        inline: true
        toolbar: "undo redo"
        menubar: false
        setup: (ed) ->
          ed.on 'init', (args) ->
            window.initial_title = tinyMCE.get("wiki-title").getContent()

      tinymce.init
        selector: "div.wiki-content"
        convert_urls: false
        inline: true
        setup: (ed) ->
          ed.on 'init', (args) ->
            window.initial_body = tinyMCE.get("wiki-content").getContent()

        plugins: [
          "autosave advlist autolink lists link image charmap"
          "searchreplace code fullscreen mention" 
          "insertdatetime media table contextmenu paste textcolor hr"
        ]
        tools: "inserttable"
        menubar: "edit insert format table tools"
        toolbar: "undo redo | styleselect forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | hr bullist numlist outdent indent | link image"
        removeformat : [
            {selector : 'b,strong,em,i,font,u,strike,sub,sup,h1,h2,h3,h4,h5,h6', remove : 'all', split : true, expand : false, block_expand : true, deep : true},
            {selector : 'span', attributes : ['style', 'class'], remove : 'empty', split : true, expand : false, deep : true},
            {selector : '*', attributes : ['style', 'class'], split : false, expand : false, deep : true}
        ]
        style_formats: [
          {title: 'Headers', items: [
            {title: 'Header 1', format: 'h1'},
            {title: 'Header 2', format: 'h2'},
            {title: 'Header 3', format: 'h3'},
            {title: 'Header 4', format: 'h4'},
            {title: 'Header 5', format: 'h5'},
            {title: 'Header 6', format: 'h6'}
          ]},

          {title: 'Inline', items: [
            {title: 'Bold', icon: 'bold', format: 'bold'},
            {title: 'Italic', icon: 'italic', format: 'italic'},
            {title: 'Underline', icon: 'underline', format: 'underline'},
            {title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
            {title: 'Superscript', icon: 'superscript', format: 'superscript'},
            {title: 'Subscript', icon: 'subscript', format: 'subscript'},
            {title: 'Code', icon: 'code', format: 'code'}
          ]},

          {title: 'Blocks', items: [
            {title: 'Paragraph', format: 'p'},
            {title: 'Blockquote', format: 'blockquote'},
            {title: 'Div', format: 'div'},
            {title: 'Pre', format: 'pre'}
          ]},

          {title: 'Alignment', items: [
            {title: 'Left', icon: 'alignleft', format: 'alignleft'},
            {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
            {title: 'Right', icon: 'alignright', format: 'alignright'},
            {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
          ]},

          {title: 'Table', items: [
            {title: 'Bordered', selector: 'table', classes: 'table-bordered'}
            {title: 'Striped', selector: 'table', classes: 'table-striped'}
            {title: 'Hover', selector: 'table', classes: 'table-hover'}
          ]},

          {title: 'Table Row', items: [
            {title: 'Green', selector: 'tr', classes: 'success'}
            {title: 'Yellow', selector: 'tr', classes: 'warning'}
            {title: 'Red', selector: 'tr', classes: 'danger'}
            {title: 'Blue', selector: 'tr', classes: 'active'}
          ]},

          {title: 'Table Cell', items: [
            {title: 'Green', selector: 'td, th', classes: 'success'}
            {title: 'Yellow', selector: 'td, th', classes: 'warning'}
            {title: 'Red', selector: 'td, th', classes: 'danger'}
            {title: 'Gray', selector: 'td, th', classes: 'active'}
          ]}

        ]

        mentions: 
          source: (query, delimiter, process) ->
            $.getJSON '/search/mentions?query=' + query + "&delimiter=" + delimiter, (data) ->
              process(data)
          render: (item) ->
            text = item.type + ": " + item.name
            if item.type == "page"
              text = item.type + ": " + item.space + " -> " + item.name
            if item.type == "ticket"
              text = item.type + ": " + item.project + " -> " + item.name

            return '<li>' +
              '<a href="javascript:;"><i style="margin: 0 4px;" class="fa ' + (item.icon or "") + '"/><span>' + text + '</span></a>' +
              '</li>'
          insert: (item, delimiter) ->
            $html = $("<span>").text(item.name)
            if item.url
              if delimiter == "!"
                $html = $("<img>", "data-mention": item.type, src: item.url)
              else
                $html = $("<a>", "data-mention": item.type, href: item.url).text(item.name)

            return $html.get(0).outerHTML

      false

    $(".edit").click ->
      enable_edit()
      $(".save").show()
      $(".cancel").show()
      $(".edit").hide()
      false

    $(".cancel").click ->
      tinyMCE.execCommand('mceRemoveEditor', true, 'wiki-title')
      tinyMCE.execCommand('mceRemoveEditor', true, 'wiki-content')
      $(".edit-helper").toggleClass("hide")
      $(".save").hide()
      $(".cancel").hide()
      $(".edit").show()
      $("h1.wiki-title").html(window.initial_title)
      $("div.wiki-content").html(window.initial_body)
      false

    $(".save").click ->
      title = tinyMCE.get("wiki-title").getContent()
      body = tinyMCE.get("wiki-content").getContent()
      type = $(".page-article").attr("data-type")
      markdown_body = $("#markdown_body").val()
      $.blockUI(message: "")

      data =
        timestamp: $(".time").data("timestamp")
        markdown_body: markdown_body
        type: type
        parent_id: $(".page-article").attr("data-parent-id")

      data[type] = 
        title: title
        body: body

      $.ajax
        type: $(this).data("type")
        url: $(this).data("url")
        success: ->
        complete: ->
          $.unblockUI()

        data: data
      false