<div class="field-unit__label">
  <%= f.label 'Code to merge into' %>
</div>
<div class="field-unit__field">
  <%= select_tag 'code[merge_into_code_id]', [] %>
  <div>
    All annotations of this code will be assigned to the selected code and this code will be deleted.<br/>
    <span style="color:#f04855; margin-bottom:4px;">Warning: This action cannot be undone.</span>
  </div>
</div>


<script>
    // belongs_to form
    $(function () {
        $(".field-unit--merge-code-field select").each(function initializeSelectize(index, element) {
            var $element = $(element);
            $element.selectize({
                placeholder: 'Search by code name...',
                valueField: 'id',
                labelField: 'localized_path',
                searchField: 'localized_path',
                create: false,
                openOnFocus: true,
                preload: 'focus',
                searchUrl: "/annotator/projects/<%= field.resource.project_id %>/mergeable_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>