{% load widget_tweaks %}
<div class="form-group {% if form.name.errors %}has-error{% endif %}">
  <label for="{{ form.name.id_for_label }}" class="form-label">Name</label>
  {{ form.name|add_class:"form-input"|attr:"autocomplete:off"|attr:"placeholder: " }}
  {% if form.name.errors %}<div class="form-input-hint">{{ form.name.errors }}</div>{% endif %}
</div>
<div class="form-group {% if form.search.errors %}has-error{% endif %}">
  <label for="{{ form.search.id_for_label }}" class="form-label">Search terms</label>
  {{ form.search|add_class:"form-input"|attr:"autocomplete:off"|attr:"placeholder: " }}
  {% if form.search.errors %}<div class="form-input-hint">{{ form.search.errors }}</div>{% endif %}
  <div class="form-input-hint">All of these search terms must be present in a bookmark to match.</div>
</div>
<div class="form-group">
  <label for="{{ form.any_tags.id_for_label }}" class="form-label">Tags</label>
  <ld-tag-autocomplete input-id="{{ form.any_tags.auto_id }}"
                       input-name="{{ form.any_tags.html_name }}"
                       input-value="{{ form.any_tags.value|default_if_none:'' }}">
  </ld-tag-autocomplete>
  <div class="form-input-hint">At least one of these tags must be present in a bookmark to match.</div>
</div>
<div class="form-group">
  <label for="{{ form.all_tags.id_for_label }}" class="form-label">Required tags</label>
  <ld-tag-autocomplete input-id="{{ form.all_tags.auto_id }}"
                       input-name="{{ form.all_tags.html_name }}"
                       input-value="{{ form.all_tags.value|default_if_none:'' }}">
  </ld-tag-autocomplete>
  <div class="form-input-hint">All of these tags must be present in a bookmark to match.</div>
</div>
<div class="form-group">
  <label for="{{ form.excluded_tags.id_for_label }}" class="form-label">Excluded tags</label>
  <ld-tag-autocomplete input-id="{{ form.excluded_tags.auto_id }}"
                       input-name="{{ form.excluded_tags.html_name }}"
                       input-value="{{ form.excluded_tags.value|default_if_none:'' }}">
  </ld-tag-autocomplete>
  <div class="form-input-hint">None of these tags must be present in a bookmark to match.</div>
</div>
<div class="form-footer d-flex mt-4">
  <input type="submit"
         name="save"
         value="Save"
         class="btn btn-primary btn-wide">
  <a href="{% url 'linkding:bundles.index' %}"
     class="btn btn-wide ml-auto">Cancel</a>
  <a href="{% url 'linkding:bundles.preview' %}"
     data-turbo-frame="preview"
     class="d-none"
     id="preview-link"></a>
</div>
<script>
  (function init() {
    const bundleForm = document.getElementById('bundle-form');
    const previewLink = document.getElementById('preview-link');

    let pendingUpdate;

    function scheduleUpdate() {
      if (pendingUpdate) {
        clearTimeout(pendingUpdate);
      }
      pendingUpdate = setTimeout(() => {
        // Ignore if link has been removed (e.g. form submit or navigation)
        if (!previewLink.isConnected) {
          return;
        }

        const baseUrl = previewLink.href.split('?')[0];
        const params = new URLSearchParams();
        const inputs = bundleForm.querySelectorAll('input[type="text"]:not([name="csrfmiddlewaretoken"]), textarea, select');

        inputs.forEach(input => {
          if (input.name && input.value.trim()) {
            params.set(input.name, input.value.trim());
          }
        });

        previewLink.href = params.toString() ? `${baseUrl}?${params.toString()}` : baseUrl;
        previewLink.click();
      }, 500)
    }

    bundleForm.addEventListener('input', scheduleUpdate);
  })();
</script>