{#
in_term_index_listing boolean shows certain fields,
as some bulk edit fields only make sense when
doing these edits from the term index.
#}

<div>
  <input type="hidden" id="txtWordIds" name="term_ids" />
</div>
{% if in_term_index_listing %}
  <div>
    <input type="checkbox" name="lowercase_terms" id="chkLowercaseTerms" /> <label for="chkLowercaseTerms">Convert terms to lowercase</label>
  </div>
{% endif %}
<div>
  <input type="checkbox" name="remove_parents" id="chkRemoveParents" /> <label for="chkRemoveParents">Remove parents</label>
</div>
<div>
  <input id="txtSetParent" name="parent" />
</div>
<div>
  <input type="checkbox" name="change_status" id="chkChangeStatus" /> <label for="chkChangeStatus">Change status</label>
</div>
<div id="status-container">
  <ul id="status">
    <li><input id="status-0" name="status" type="radio" value="1"> <label for="status-0">1</label></li>
    <li><input id="status-1" name="status" type="radio" value="2"> <label for="status-1">2</label></li>
    <li><input id="status-2" name="status" type="radio" value="3"> <label for="status-2">3</label></li>
    <li><input id="status-3" name="status" type="radio" value="4"> <label for="status-3">4</label></li>
    <li><input id="status-4" name="status" type="radio" value="5"> <label for="status-4">5</label></li>
    <li><input id="status-5" name="status" type="radio" value="99"> <label for="status-5">Wkn</label></li>
    <li><input id="status-6" name="status" type="radio" value="98"> <label for="status-6">Ign</label></li>
  </ul>
</div>
<div>
  <input id="txtAddTags" name="add_tags" />
</div>
<div>
  <input id="txtRemoveTags" name="remove_tags" />
</div>

<script type="text/javascript" src="/static/js/never_cache/lute-tagify-utils.js" charset="utf-8"></script>

<script>
  var TAGS = {{ tags | safe }}

  // Parents are in the tagify-managed #txtSetParent input box.
  let get_parents = function() {
    // During form load, and in "steady state" (i.e., after the tags
    // have been added or removed, and the focus has switched to
    // another control) the #sync_status text box is loaded with the
    // values.
    const pdata = $('#txtSetParent').val();
    if ((pdata ?? '') == '') {
      return [];
    }
    const j = JSON.parse(pdata);
    const parents = j.map(e => e.value);
    return parents;
  };

  let setup_tags_tagify = function(input_id, placeholder, enforceWhitelist) {
    const override_base_settings = {
      placeholder: placeholder,
      enforceWhitelist: enforceWhitelist,
    };
    return lute_tagify_utils_setup_term_tag_tagify(
      document.getElementById(input_id), TAGS, override_base_settings
    );
  };

  let handle_change_status_checkbox_change = function(is_checked) {
    $("input[name='status']").prop('disabled', !is_checked);
    if (!is_checked) {
      // unselect all radios so nothing is submitted.
      $('input[name="status"]').prop('checked', false);
    }
  };

  $(document).ready(function () {
    const txtAddTags_tagify = setup_tags_tagify('txtAddTags', 'Add tags', false);
    const txtRemoveTags_tagify = setup_tags_tagify('txtRemoveTags', 'Remove tags', true);

    handle_change_status_checkbox_change(false);
    $('#chkChangeStatus').change(function () {
      handle_change_status_checkbox_change($(this).is(':checked'));
    });

    let disable_parent_txt = false;
    if (typeof get_lang_id !== "function") {
      console.log("missing get_lang_id in surrounding context of _bulk_edit_form_fields");
      $('#txtSetParent').prop("disabled", true);
    }
    else {
      const input = document.getElementById('txtSetParent');
      const this_term_text = null;  // bulk edits = no "master term"
      let override_settings = {
        placeholder: 'Set parent (limit one)',
        maxTags: 1,
        addTagOnBlur: false,
      };
      const parents_tagify = lute_tagify_utils_setup_parent_tagify(
        input, get_lang_id, this_term_text, override_settings
      );
    }
  });
</script>
