<%= form_for @document do |f| %>
  <%= content_for :navbar_left_content do %>
    <%= render partial: 'documents/components/document_name_bar', locals: { document: @document, f: f } %>
  <% end %>

  <%= content_for :full_width_page_header do %>
    <%= render partial: 'documents/components/autosave_bar', locals: { document: @document } %>

    <%= render partial: 'documents/components/smart_sidebar', locals: { document: @document } %>
    <div id="editor" class="editable js-can-mention-pages" data-save-url="<%= document_url(@document) %>"><%= @document.body.try(:html_safe) %></div>
  <% end %>

  <div class="grey-text autosave-bar">
    <i class="material-icons js-autosave-icon grey-text">save</i>
    <span class="js-autosave-status">
      This document will automatically save as you make changes.
      Highlight any text to bring up formatting options.
    </span>
  </div>
<% end %>

<div style="clear: both"></div>
<%= content_for :javascript do %>
  $(document).ready(function(){
    // Page @mentions
    var tribute = new Tribute({
      values: [
        <% @linkables_cache.each do |class_name, collection| %>
          <% linkable_class = class_name.constantize %>
          <% collection.each do |page_name, page_id| %>
            {
              key:   "<%= page_name.gsub('"', "\"").gsub("\n", " ").gsub("\r", " ").strip %>",
              value: '[[<%= class_name %>-<%= page_id %>]]',
              color: '<%= linkable_class.color %>',
              icon:  '<%= linkable_class.icon %>'
            },
          <% end %>
        <% end %>
      ],
      selectTemplate: function (item) {
        // We're overriding the default here so we don't prepend a @
        return '<span class="' + item.original.color + '-text" contenteditable="false">' + item.original.value + '</span>';
      },
      menuItemTemplate: function (item) {
        return '<i class="material-icons right ' + item.original.color + '-text">' + item.original.icon + '</i>' + item.string;
      },
      spaceSelectsMatch: false
    });
    tribute.attach(document.querySelectorAll('.js-can-mention-pages'));
  });
<% end %>
