<dialog id="{{id}}" class="eds-c-modal" aria-modal="true" aria-labelledby="eds-c-modal-title" aria-describedby="eds-c-modal-description">
    <div class="eds-c-modal__content">
        <div class="eds-c-modal__header">
            {{#with iconURL}}
            <button class="eds-c-modal__dismiss" type="button" aria-label="Dismiss button" data-component-modal-close>
                <svg role="img" aria-label="Close" width="24" height="24" focusable="false">
                        <title>modal close icon</title>
                        <use xlink:href="{{this}}"></use>
                </svg>
            </button>
            {{/with}}
            <div id="eds-c-modal-title" class="eds-c-modal__title">{{title}}</div>
        </div>
        <div class="eds-c-modal__body" id="eds-c-modal-description">
            <p>{{{description}}}</p>
        </div>
        <div class="eds-c-modal__footer" data-component-modal-close
            {{#each dataAttributes as |dataAttribute|}}
                data-{{dataAttribute.name}}="{{dataAttribute.value}}"
            {{/each}}
            >
            {{#each buttons}}
                {{> eds-c-button }}
            {{/each}}
        </div>
    </div>
</dialog>
