uktrade/lite-forms

{% load static %}

<noscript><p class="govuk-label">Separate items with a space.</p></noscript>

<div class="{% for class in component.classes %}{{ class }}{% endfor %}">
    <input class="govuk-input" type="text" name="{{ component.name }}" value="{{ TO_DO }}" id="token-bar-{{ component.name }}">
</div>

<script type="text/javascript" nonce="{{ request.csp_nonce }}">
    $(document).ready(function() {
        var items = [{% for option in component.options %}{id: '{{ option.key }}', name: '{{ option.value }}', classes: [{% for class in option.classes %}'{{ class }}', {% endfor %}]}, {% endfor %}];
        var tokenField = new Tokenfield({
            el: document.getElementById("token-bar-{{ component.name }}"),
            items: items,
            newItems: false,
            addItemOnBlur: true,
            filterSetItems: false,
            addItemsOnPaste: true,
            minChars: 1,
            itemName: '{{ component.name }}',
            setItems: [{% for option in value|unique_list %}{id: '{{ option.key|default:option }}', name: '{{ option.value|default:option }}', classes: [{% for class in option.classes %}'{{ class }}', {% endfor %}]},, {% endfor %}]
        });

        $("#token-bar-{{ component.name }}").remove();
    });
</script>