<div class="field-unit__label">
  <%= f.label field.attribute %>
</div>
<div class="field-unit__field field-unit--parent-id-field">
  <%# f.select :parent_id, nested_dropdown_codes, include_blank: true %>
  <%
    language = DiscourseAnnotator::UserSetting.language_for_user(current_user)
    parent = field.resource.parent
  %>
  <%= f.select(:parent_id, nil) do %>
    <% if parent.present? %>
      <option value="<%= parent.id %>" selected="selected">
        <%= "#{parent.localized_name_with_path(language)} (by #{parent.creator&.username})" %>
      </option>
    <% end %>
  <% end %>
</div>



<script>
    // belongs_to form
    $(function () {
        $(".field-unit--parent-id-field select").each(function initializeSelectize(index, element) {
            var $element = $(element);
            $element.selectize({
                valueField: 'id',
                labelField: 'localized_path',
                searchField: 'localized_path',
                create: false,
                searchUrl: "/annotator/projects/<%= @project.id %>/autosuggest_codes.json?code_id=<%= field.resource.id %>&q=",
                load: function (query, callback) {
                    if (!query.length) return callback();
                    var searchUrl = this.settings.searchUrl;
                    $.ajax({
                        url: searchUrl + encodeURIComponent(query),
                        type: 'GET',
                        error: function () {
                            callback();
                        },
                        success: function (res) {
                            callback(res);
                        }
                    });
                },
            });
        });
    });
</script>