<ul class="sortable collapsible" data-sortable-class="AttributeField">
  <li>
    <div class="collapsible-header <%= @content_type_class.color %> white-text">
      <i class="material-icons"><%= category.icon %></i>
      Customize this category's fields
    </div>
  </li>
  <% category.attribute_fields.order(:position).each do |attribute_field| %>
    <%# todo this hack shouldn't be necessary, but for some reason it is #codesmell %>
    <% next unless attribute_field.persisted? %>

    <li data-position="<%= attribute_field.position %>" data-content-id="<%= attribute_field.id %>">
      <div class="collapsible-header">
        <span class="sortable-handle"><i class="material-icons grey-text">menu</i></span>
        <i class="material-icons"><%= attribute_field.icon %></i>
        <span class="js-field-label"><%= attribute_field.label %> <%# attribute_field.position %></span>
        <% if attribute_field.hidden? %>
          <span class="grey-text">&mdash;hidden</span>
        <% end %>
      </div>

      <div class="collapsible-body">
        <%= render partial: 'content/attributes/field_customization', locals: { field: attribute_field } %>
      </div>
    </li>
  <% end %>
  <li>
    <div class="collapsible-header"><i class="material-icons">add</i>Add a text field to this section</div>
    <div class="collapsible-body">
      <%= form_for(category.attribute_fields.build, method: :post) do |f| %>
        <%= f.hidden_field :attribute_category_id, value: category.id %>
        <%= f.hidden_field :field_type, value: 'text_area' %>

        <div class="row">
          <div class="input-field col s12">
            <%= f.text_area :label, class: 'materialize-textarea js-field-input' %>
            <%= f.label :label, 'Field label' %>
          </div>
          <div class="input-field col s12">
            <%= f.submit 'Add new text field', class: "btn #{@content_type_class.color}" %>
          </div>
        </div>
        <div class="row">
          <div class="grey-text text-darken-1">
            Notebook.ai can suggest additional text fields for this category.
          </div>
          <p class="suggest-fields-container">
          </p>
          <%= f.button "Request suggestions", class: 'small btn white black-text js-show-field-suggestions' %>
        </div>
      <% end %>
    </div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">add</i>Add a link field to this section</div>
    <div class="collapsible-body">
      <%= form_for(category.attribute_fields.build, method: :post) do |f| %>
        <%# todo the following line shouldn't be necessary %>
        <%= f.hidden_field :attribute_category_id, value: category.id %>
        <%= f.hidden_field :field_type, value: 'link' %>

        <div class="row">
          <div class="input-field col s12">
            <%= f.text_area :label, class: 'materialize-textarea js-field-input' %>
            <%= f.label :label, 'Field label' %>
          </div>
          <div class="input-field col s12">
            <select multiple 
              name="attribute_field[field_options][linkable_types][]" 
              prompt="Please select at least one page type for this field to link to"
            >
              <%= 
                options_for_select(
                  Rails.application.config.content_types[:all].map { |klass| [klass.name.pluralize, klass.name] }
                )
              %>
            </select>
            <label>Linkable page types</label>
          </div>
          <div class="input-field col s12">
            <%= f.submit 'Add new link field', class: "btn #{@content_type_class.color}" %>
          </div>
        </div>
      <% end %>
    </div>
  </li>
</ul>