{# bfx/modal.html — Modal dialog macro #}

{% macro modal(id, title=none, attrs={}) %}
<dialog id="{{ id }}"{% for key, val in attrs.items() %} {{ key }}="{{ val }}"{% endfor %}>
  <article>
    <header>
      <button aria-label="Close" rel="prev" onclick="document.getElementById('{{ id }}').close();"></button>
      {% if title %}<h3>{{ title }}</h3>{% endif %}
    </header>
    {{ caller() }}
  </article>
</dialog>
{% endmacro %}

{% macro modal_trigger(target_id, label, variant="primary", attrs={}) %}
<button{% if variant != "primary" %} class="{{ variant }}"{% endif %}
  onclick="document.getElementById('{{ target_id }}').showModal();"
  {% for key, val in attrs.items() %} {{ key }}="{{ val }}"{% endfor %}
>{{ label }}</button>
{% endmacro %}