{# Key/value editor for the label conditions of the Checkmk Setup Rule form.

   The Host label and Service label conditions are stored as text:
   "key:value", several labels comma separated, all of them must match.
   This shows every label as a compact key : value chip in one wrapping
   line, "+" adds a label, "x" removes one, and writes the text back on
   every change, so storage and export read the same text as before. Keys
   and values are suggested by the view's _label_suggestions endpoint
   (labels other Setup Rules use, host labels also the attributes of the
   hosts). Jinja works in both inputs. A value that cannot be split into
   key and value (e.g. one Jinja expression rendering all labels) stays in
   the plain text field, the text button switches at any time. Colours use
   the theme --surface-* tokens with light fallbacks so every theme renders
   it. #}
<style>
.label-cond-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.label-cond-editor .lce-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 4px;
  border: 1px solid var(--surface-border, #d7dbe0);
  border-radius: 6px;
  background: var(--surface-bg, #f8f9fa);
}
.label-cond-editor .lce-label input {
  width: 9em;
  height: 26px;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--surface-text, #2c3e50);
  font-size: 0.85rem;
}
.label-cond-editor .lce-label input:focus {
  border-color: var(--surface-border, #d7dbe0);
  background: var(--surface-subtle, #fff);
  outline: none;
}
.label-cond-editor .lce-colon {
  font-family: ui-monospace, monospace;
  color: var(--surface-muted, #4a4f57);
}
.label-cond-editor .lce-btn {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--surface-border, #d7dbe0);
  border-radius: 6px;
  background: var(--surface-bg, #f8f9fa);
  color: var(--surface-muted, #4a4f57);
  font-size: 0.78rem;
}
.label-cond-editor .lce-label .lce-btn {
  border: 0;
  background: transparent;
  padding: 0 6px;
}
.label-cond-editor .lce-btn:hover { color: var(--surface-text, #2c3e50); }
.label-cond-editor .lce-note {
  font-size: 0.78rem;
  color: var(--surface-muted, #4a4f57);
}
</style>
<script type="application/json" id="label-cond-endpoint">{{ url_for('.label_suggestions')|tojson }}</script>
{# The JavaScript handles Jinja delimiters as plain text. #}
{% raw %}
<script type="text/javascript">
(function() {
  var NAME_RE = /(^|-)(condition_label_template|condition_service_label)$/;
  var ENDPOINT = JSON.parse(document.getElementById('label-cond-endpoint').textContent);
  var cache = {};
  var counter = 0;

  // Keys (key === null) or values of a key, fetched once per kind and key.
  function suggestions(kind, key, done) {
    var slot = kind + '\u0000' + (key === null ? '' : 'v:' + key);
    if (cache[slot]) { cache[slot].then(done); return; }
    var url = ENDPOINT + '?kind=' + encodeURIComponent(kind);
    if (key !== null) { url += '&key=' + encodeURIComponent(key); }
    cache[slot] = fetch(url, {credentials: 'same-origin'})
      .then(function(r) { return r.ok ? r.json() : {suggestions: []}; })
      .then(function(data) { return data.suggestions || []; })
      .catch(function() { return []; });
    cache[slot].then(done);
  }

  function fillList(list, values) {
    list.innerHTML = '';
    values.forEach(function(value) {
      var option = document.createElement('option');
      option.value = value;
      list.appendChild(option);
    });
  }

  // Split at `sep` outside of {{ }} and {% %}. limit 1: only at the first.
  function splitOutsideJinja(text, sep, limit) {
    var parts = [], depth = 0, start = 0;
    for (var i = 0; i < text.length; i++) {
      var two = text.substr(i, 2);
      if (two === '{{' || two === '{%') { depth++; i++; continue; }
      if ((two === '}}' || two === '%}') && depth > 0) { depth--; i++; continue; }
      if (depth === 0 && text[i] === sep && (!limit || parts.length < limit)) {
        parts.push(text.slice(start, i));
        start = i + 1;
      }
    }
    parts.push(text.slice(start));
    return parts;
  }

  // [[key, value], ...] or null when the text is no list of key:value.
  function parse(text) {
    if (!text.trim()) { return [['', '']]; }
    var labels = [];
    var entries = splitOutsideJinja(text, ',');
    for (var i = 0; i < entries.length; i++) {
      if (!entries[i].trim()) { continue; }
      var pair = splitOutsideJinja(entries[i], ':', 1);
      if (pair.length !== 2) { return null; }
      labels.push([pair[0].trim(), pair[1].trim()]);
    }
    return labels.length ? labels : [['', '']];
  }

  function button(cls, icon, title) {
    var node = document.createElement('button');
    node.type = 'button';
    node.className = cls;
    node.title = title;
    node.innerHTML = '<i class="fa ' + icon + '"></i>';
    return node;
  }

  function decorate(input) {
    if (input.dataset.labelEditor) { return; }
    input.dataset.labelEditor = '1';
    var kind = /condition_label_template$/.test(input.name) ? 'host' : 'service';
    var keyList = document.createElement('datalist');
    keyList.id = 'lce-keys-' + (++counter);

    var editor = document.createElement('div');
    editor.className = 'label-cond-editor';
    editor.appendChild(keyList);
    var add = button('lce-btn lce-add', 'fa-plus', 'Add a label (all must match)');
    var toggle = button('lce-btn lce-toggle', 'fa-pencil', 'Edit as text');
    var note = document.createElement('span');
    note.className = 'lce-note';
    editor.appendChild(add);
    editor.appendChild(toggle);
    editor.appendChild(note);

    function labels() { return editor.querySelectorAll('.lce-label'); }

    function write() {
      var parts = [];
      labels().forEach(function(label) {
        var key = label.querySelector('.lce-key').value.trim();
        var value = label.querySelector('.lce-value').value.trim();
        if (key || value) { parts.push(key + ':' + value); }
      });
      input.value = parts.join(', ');
      note.textContent = labels().length > 1 ? 'all must match' : '';
      $(input).trigger('change');
    }

    function addLabel(key, value) {
      var label = document.createElement('span');
      label.className = 'lce-label';
      var keyInput = document.createElement('input');
      keyInput.className = 'lce-key';
      keyInput.placeholder = 'key';
      keyInput.setAttribute('list', keyList.id);
      keyInput.autocomplete = 'off';
      keyInput.value = key;
      var valueList = document.createElement('datalist');
      valueList.id = 'lce-values-' + (++counter);
      var valueInput = document.createElement('input');
      valueInput.className = 'lce-value';
      valueInput.placeholder = 'value';
      valueInput.setAttribute('list', valueList.id);
      valueInput.autocomplete = 'off';
      valueInput.value = value;
      var colon = document.createElement('span');
      colon.className = 'lce-colon';
      colon.textContent = ':';
      var remove = button('lce-btn', 'fa-times', 'Remove this label');
      remove.addEventListener('click', function() {
        if (labels().length > 1) {
          label.remove();
        } else {
          keyInput.value = valueInput.value = '';
        }
        write();
      });
      keyInput.addEventListener('focus', function() {
        suggestions(kind, null, function(values) { fillList(keyList, values); });
      });
      valueInput.addEventListener('focus', function() {
        var current = keyInput.value.trim();
        if (!current || current.indexOf('{') !== -1) { fillList(valueList, []); return; }
        suggestions(kind, current, function(values) { fillList(valueList, values); });
      });
      keyInput.addEventListener('input', write);
      valueInput.addEventListener('input', write);
      label.appendChild(keyInput);
      label.appendChild(colon);
      label.appendChild(valueInput);
      label.appendChild(valueList);
      label.appendChild(remove);
      editor.insertBefore(label, add);
      return label;
    }

    add.addEventListener('click', function() {
      addLabel('', '').querySelector('.lce-key').focus();
      write();
    });

    function showText(reason) {
      labels().forEach(function(label) { label.remove(); });
      add.style.display = 'none';
      input.style.display = '';
      toggle.title = 'Edit as key and value';
      toggle.innerHTML = '<i class="fa fa-tags"></i>';
      note.textContent = reason || '';
    }

    function showLabels() {
      var parsed = parse(input.value);
      if (!parsed) {
        showText('No list of key:value, edit it as text.');
        return;
      }
      labels().forEach(function(label) { label.remove(); });
      parsed.forEach(function(pair) { addLabel(pair[0], pair[1]); });
      add.style.display = '';
      input.style.display = 'none';
      toggle.title = 'Edit as text';
      toggle.innerHTML = '<i class="fa fa-pencil"></i>';
      note.textContent = parsed.length > 1 ? 'all must match' : '';
    }

    toggle.addEventListener('click', function() {
      if (input.style.display === 'none') { showText(''); } else { showLabels(); }
    });
    input.parentNode.insertBefore(editor, input);
    showLabels();
  }

  function scan(root) {
    root.querySelectorAll('input[name]').forEach(function(input) {
      if (NAME_RE.test(input.name) && input.name.indexOf('outcomes') !== -1) {
        decorate(input);
      }
    });
  }

  $(function() {
    var form = document.querySelector('form.admin-form') || document.body;
    scan(form);
    // Rows added with "Add Outcomes" come in later.
    new MutationObserver(function() { scan(form); })
      .observe(form, {childList: true, subtree: true});
  });
})();
</script>
{% endraw %}