notebook/app/views/attribute_fields/_modal.html.erb

<div id="attribute-field-modal" class="modal">
  <%= form_for AttributeField.new do |f| %>
    <%= hidden_field_tag :entity_type, content.class.content_name %>
    <div class="modal-content">
      <h4>
        <i class="material-icons right <%= content.class.color %>-text"><%= content.class.icon %></i>
        Create custom categories and fields
      </h4>

      <div class="row">
        <div class="col s12 m6">
          <div class="input-field">
            <%= f.label :attribute_category, 'New category' %><br />
            <%= f.text_area :attribute_category, class: "materialize-textarea autocomplete" %>
          </div>
          <p class="grey-text help">
            We find the best categories are broad and easy to add to. Examples of categories are "Appearance", "Demeanor", or "Abilities".
            This will be added as a tab to all of your <%= content.class.name.downcase.pluralize %>.
          </p>
        </div>
        <div class="col s12 m6">
          <div class="input-field">
            <%= f.label :label, 'Field in category' %>
            <%= f.text_area :label, class: "materialize-textarea" %>
            <p class="grey-text help">
              Additionally, you can create your first field for this category here. You can add additional fields to
              this category by resubmitting this form.
            </p>
            <p class="grey-text help">
              Examples of fields may be "Height", "Age married", or "List of Adventures". Anything you want to track!
            </p>
          </div>
        </div>
      </div>

      <% unless defined?(safe_mode) && safe_mode %>
      <p class="row">
        Please save any changes before adding a field. It will refresh the page and any changes in your form
        will be lost.
      </p>
      <% end %>
    </div>

    <div class="modal-footer">
      <%= f.submit "Create field", class: "btn blue waves-effect waves-blue" %>
      <a href="#!" class=" modal-action modal-close waves-effect waves-blue btn-flat">close</a>
    </div>
  <% end %>

  <script type="text/javascript">
    $(function() {
      $('#attribute_field_attribute_category').autocomplete({
        data: {
          <% current_user.attribute_categories.where(entity_type: content.class.content_name).each do |category| %>
            "<%= category.label %>": null,
          <% end %>
        }
      });
    });
  </script>
</div>