{% if component.enabled == true %}
	{% set modalSizeClass = {
  'small': 'modal-sm',
  'medium': 'modal-md',
  'large': 'modal-lg'
}[component.configuration.config.modalSize] ?? 'modal-md' %}

	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#customModal">
		{{ component.configuration.config.modalButtonText }}
	</button>

	<div class="modal fade" id="customModal" tabindex="-1" role="dialog" aria-labelledby="customModalTitle" aria-hidden="true">
		<div class="modal-dialog {{ modalSizeClass }}" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="customModalTitle">{{ component.configuration.config.modalTitle }}</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="{{ component.configuration.config.modalCloseText }}">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>

				<div class="modal-body">
					{% if component.configuration.config.modalImage.url is defined and component.configuration.config.modalImage.url != '' %}
						{% if component.configuration.config.modalImage.externalLink is defined and component.configuration.config.modalImage.externalLink != '' %}
							<a href="{{ component.configuration.config.modalImage.externalLink }}" target="_blank">
							{% endif %}
							<img src="{{ component.configuration.config.modalImage.url }}" alt="{{ component.configuration.config.modalTitle }}" class="img-fluid mb-3">
							{% if component.configuration.config.modalImage.externalLink is defined and component.configuration.config.modalImage.externalLink != '' %}
							</a>
						{% endif %}
					{% endif %}

					<div class="modal-content-html">
						{{ component.configuration.config.modalContent|raw }}
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ component.configuration.config.modalCloseText }}</button>
				</div>
			</div>
		</div>

		{% if component.configuration.config.modalOverlay == 'true' %}
			<div class="modal-overlay"></div>
		{% endif %}
	</div>

	 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>

	<script>
		document.addEventListener('DOMContentLoaded', function(){
			const modalElement = document.getElementById('customModal');
			
			const myModal = new bootstrap.Modal(modalElement, {
				keyboard: true
			});
			
			document.querySelector('[data-toggle="modal"]').addEventListener('click', function() {
				myModal.show();
			});
			
			const closeButtons = modalElement.querySelectorAll('.close, .btn-secondary');
			closeButtons.forEach(function(btn) {
				btn.addEventListener('click', function() {
				myModal.hide();
				});
			});
		});
	</script>

{% endif %}