{#
  Renders a generic popover component, often used internally by other components like dropdowns or selects.

  @param id {string} [optional] - Unique identifier for the popover component.
  @param trigger {string} [optional] - HTML content for the element that triggers the popover.
  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
#}
{% macro popover(
  trigger,
  id=None,
  main_attrs={},
  trigger_attrs={},
  popover_attrs={}
) %}
{% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}

<div
  id="{{ id }}"
  class="popover {{ main_attrs.class }}"
  {% for key, value in main_attrs.items() %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <button
    id="{{ id }}-trigger"
    type="button"
    aria-expanded="false"
    aria-controls="{{ id }}-popover"
    {% for key, value in trigger_attrs.items() %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {{ trigger | safe }}
  </button>
  <div
    id="{{ id }}-popover"
    data-popover
    aria-hidden="true"
    {% for key, value in popover_attrs.items() %}
      {{ key }}="{{ value }}"
    {% endfor %}
  > 
    {{ caller() if caller }}
  </div>
</div>
{% endmacro %}