{% load static %}
<div class="icon-picker-widget">
  {% include "django/forms/widgets/text.html" %}

  {% with widget.attrs.id as widget_id %}
    <span id="{{ widget_id }}-icon" aria-hidden="true"></span>
    <script>
      (async () => {
        let widgetInput = document.getElementById('{{ widget_id }}');
        let widgetIcon = document.getElementById('{{ widget_id }}-icon');

        const options = {
          iconLibraries: ['design-system-buildings.json', 'design-system-business.json', 'design-system-communication.json', 'design-system-design.json', 'design-system-development.json', 'design-system-device.json', 'design-system-document.json', 'design-system-editor.json', 'design-system-finance.json', 'design-system-health.json', 'design-system-logo.json', 'design-system-map.json', 'design-system-media.json', 'design-system-others.json', 'design-system-system.json', 'design-system-user.json', 'design-system-weather.json'],
          allowEmpty: true,
          onSelect: function (jsonIconData) {
            widgetInput.value = jsonIconData.iconClass;
            widgetIcon.classList.add(jsonIconData.iconClass, "design-system-icon--lg", "design-system-mt-1w");
            },
          onReset: function () {
            widgetInput.innerHTML = "";
            widgetIcon.className = "";
          }
        }

        let _uip = new UniversalIconPicker('#{{ widget_id }}', options);
      })();
    </script>
  {% endwith %}
</div>
