{% comment %}
  Give me options
  This component is CSS and JS only.
  The HTML must be rewritten each time it is used.
  pid - a unique id that allows the component to be re-used on the same page.
{% endcomment %}

<script type="module">
  const giveMeOptions = document.querySelector(
    '[data-give-me-options-{{ pid }}]'
  );
  giveMeOptions?.addEventListener('click', event => {
    if ('giveMe' in event.target.dataset) {
      giveMeOptions.classList.toggle('displayed');
      event.target.setAttribute(
        'aria-expanded',
        giveMeOptions.classList.contains('displayed'),
      );
    }
  });
  giveMeOptions?.addEventListener('change', event => {
    if (event.target.localName == 'input') {
      event.target.closest('form').submit();
    }
  });
</script>