{% macro modal(id, title='', subtitle='') -%}
<aside id="{{ id }}" class="hil-dialog" hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="{{ id }}-title">
  <div class="hil-dialog-backdrop" data-hil-dialog-close="{{ id }}"></div>
  <div class="hil-dialog-panel">
    <header class="hil-dialog-header">
      <div>
        <h3 id="{{ id }}-title">{{ title }}</h3>
        {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
      </div>
      <button type="button" class="hil-ghost-btn" data-hil-dialog-close="{{ id }}">Close</button>
    </header>
    <div class="hil-dialog-body">{{ caller() if caller else '' }}</div>
  </div>
</aside>
{%- endmacro %}

{% macro drawer(id, title='', subtitle='') -%}
<aside id="{{ id }}" class="hil-drawer" hidden aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="{{ id }}-title">
  <div class="hil-drawer-panel">
    <header>
      <div>
        <h4 id="{{ id }}-title">{{ title }}</h4>
        {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
      </div>
      <button type="button" class="hil-ghost-btn" data-hil-drawer-close="{{ id }}">Close</button>
    </header>
    <div class="hil-drawer-body">{{ caller() if caller else '' }}</div>
  </div>
</aside>
{%- endmacro %}

{% macro side_panel(id, title='', subtitle='') -%}
<aside id="{{ id }}" class="hil-side-panel" hidden aria-hidden="true">
  <header class="hil-section-header">
    <div>
      <h4>{{ title }}</h4>
      {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
    </div>
  </header>
  <div class="hil-side-panel-body">{{ caller() if caller else '' }}</div>
</aside>
{%- endmacro %}