<wa-dropdown class="theme-selector" title="Select Theme">
  <wa-button slot="trigger" id="theme-selector-trigger" appearance="plain">
    <wa-icon name="paintbrush" variant="regular" class="icon-embiggen"></wa-icon>
  </wa-button>

  {# Free themes #}
  {% for theme in themer.themes %}
    {% if not theme.isPro %}
      <wa-dropdown-item
        value="{{ theme.filename | stripExtension }}"
        data-brand="{{ theme.colorBrand.color }}"
        data-palette="{{ theme.palette.filename | stripExtension }}"
      >
        {{ theme.name }}
      </wa-dropdown-item>
    {% endif %}
  {% endfor %}

  {# Pro themes #}
  {% for theme in themer.themes %}
    {% if loop.first %}<wa-divider></wa-divider>{% endif %}
    {% if theme.isPro %}
      <wa-dropdown-item
        value="{{ theme.filename | stripExtension }}"
        data-brand="{{ theme.colorBrand.color }}"
        data-palette="{{ theme.palette.filename | stripExtension }}"
      >
        {{ theme.name }}
      </wa-dropdown-item>
    {% endif %}
  {% endfor %}
</wa-dropdown>
<wa-tooltip for="theme-selector-trigger" id="theme-tooltip">Select Theme</wa-tooltip>

<script>
  // Handle dropdown selection and trigger input event for theme.js
  document.querySelectorAll('wa-dropdown.theme-selector').forEach(el => {
    el.addEventListener('wa-select', (event) => {
      const selectedValue = event.detail.item.value;

      // Trigger input event for theme.js
      el.value = selectedValue;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    });
  });
</script>
