{#
/**
 * @file
 * Template for Description List component.
 */
#}
{% set id = attributes.id|default(id)|default(('modal')) %}
{% set open = attributes.open|default(open)|default(false) %}

<dialog {{ attributes.addClass('kern-dialog').setAttribute('aria-labelledby', id~'_heading').setAttribute('id', id) }}{{ open ? ' open' }}>
  <header class="kern-dialog__header">
    <h2 class="kern-title kern-title--large" id="{{ id }}_heading">
      {% block title %}
        {{ title }}
      {% endblock %}
    </h2>
    <button class="kern-btn kern-btn--tertiary">
      <span class="kern-icon kern-icon--close" aria-hidden="true"></span>
      <span class="kern-sr-only">{{ 'Close'|t }}</span>
    </button>
  </header>
  <section class="kern-dialog__body">
    <div class="kern-body">
      {% block body %}
        {{ body }}
      {% endblock %}
    </div>
  </section>
  <footer class="kern-dialog__footer">
    {% block buttons %}
      {{ buttons }}
      {% for button in buttons %}
        {% embed 'kern_ux_canvas:button' with button only %}
        {% endembed %}
      {% endfor %}
    {% endblock %}
  </footer>
</dialog>
