modal.html

---
layout: patterns/shell
---

{% capture this_app %}{{ page.application | slugify }}{% endcapture %}

<div 
    id="pat-modal-panel-space">
    <dialog
        class="{{ page.panel_size | default: 'medium' }} pat-modal-panel"
        id="pat-modal-panel"
        open>
        <div
            class="modal-panel-contents">
            {% if page.title %}
                <div
                    class="modal-panel-header">
                    <h1
                        class="modal-panel-title">
                        {%- if page.title contains 'label_' -%}
                            {% include patterns/i18n 
                                id=page.title 
                                source=page.title_source %}
                        {%- else -%}
                            {{ page.title }}
                        {%- endif -%}
                    </h1>
                </div>
            {% endif %}
            {% if page.action %}
                <form
                    action="{{ page.action }}"
                    data-pat-inject="{{ page.inject }}"
                    class="pat-inject pat-form modal-panel-body">
                    {{ content }}
                    {% include patterns/modal-buttons.html %}
                </form>
            {% else %}
                <div 
                    class="modal-panel-body">
                    {{ content }}
                    {% include patterns/modal-buttons.html %}
                </div>
            {% endif %}                
        </div>
    </dialog>
</div>