{% load styling_tags %}
{% load wagtailcore_tags %}

<a class="btn btn-{{ self.button_class }}" data-bs-toggle="modal" data-bs-target="#modal_{{ blockid }}" {% get_styling self.styling %}>{{ self.text }}</a>

<div class="modal fade" role="dialog" id="modal_{{ blockid }}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            {% if self.modal_header %}
            <div class="modal-header">
            	<h4 class="modal-title">{{ self.modal_header }}</h4>
		        <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
	          		<span aria-hidden="true"><i class="fa fa-times"></i></span>
		        </button>
	      	</div>
            {% endif %}
            <div class="modal-body">
                {{ self.modal_content|convert_to_html }}
            </div>
            {% if self.modal_footer %}
            <div class="modal-footer">
                {{ self.modal_footer }}
            </div>
            {% endif %}
        </div>
    </div>
</div>