{% comment %}

    Bootstrap Modal, https://getbootstrap.com/docs/5.1/components/modal/

    E.G. --> {% include feature/modal.html button="More Info" color="info" title="Information" text="Example text" %}

    Options: 
    - "button" = text of button to trigger modal
    - "color" = color of modal button (primary, secondary, success, danger, warning, info, light, dark)
    - "title" = header text for modal pop up
    - "text" = body text for modal pop up, can use markdown formatting (tip: use a Liquid capture to add more complex content)

{%- endcomment -%}
<!-- Button trigger modal -->
<p class="text-center mb-3">
    <button type="button" class="btn btn-{{ include.color | default: 'primary' }}" data-bs-toggle="modal" data-bs-target="#{{ include.button | slugify }}Modal">{{ include.button }}</button>
</p>
<!-- Modal -->
<div class="modal fade" id="{{ include.button | slugify }}Modal" tabindex="-1" role="dialog" aria-labelledby="{{ include.button | slugify }}ModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title" id="{{ include.button | slugify }}ModalLabel">{{ include.title }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" >
            {{ include.text | markdownify }}
            </div>
        </div>
    </div>
</div>
