{% from "components/icon.html" import Icon %}

{% macro Modal(name, dismissable=False, classes="") -%}
  <div v-show="$root.activeModal === '{{name}}'" v-cloak>
    <div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
      <div class='modal__container'>
        <div class='modal__dialog' role='dialog' aria-modal='true'>
          <div class='modal__body'>
            <!-- Use these elements in caller for modal to be styled properly -->
            <!-- h1 for header text -->
            <!-- hr -->
            <!-- div class='action-group' for buttons -->

            {{ caller() }}

            {% if dismissable %}
              <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
                {{ Icon('x') }}
              </button>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endmacro %}
