{% set options = { modalId: 'galleryModal', modalTitle: null, elementClickTriggerSelector: null,}|merge(options|default({})) %}<div class="modal fade gallery-modal" id="{{ options.modalId }}" tabindex="-1" role="dialog" aria-labelledby="{{ options.modalId }}Label" aria-hidden="true" {{ options.elementClickTriggerSelector ? ('data-element-click-trigger-selector="' ~ options.elementClickTriggerSelector ~ '"')|raw }}> <div class="modal-dialog modal-dialog-centered" role="document" style="height: calc(100vh - 20px); max-width: 90vw; margin: 10px auto;"> <div class="modal-content" style="height: 100%;"> <div class="modal-header" style="flex-shrink: 0;"> <h5 class="modal-title" id="{{ options.modalId }}Label"> <span class="gallery-title{{ options.modalTitle ? ' permanent'}}">{{ options.modalTitle }}</span> </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body d-flex flex-column overflow-hidden p-3" style="flex: 1;"> <div class="gallery-slides-container flex-grow-1" style="min-height: 0; display: flex; flex-direction: column;"> {% block slides %}{% endblock %} </div> <div class="gallery-controls d-flex justify-content-between align-items-center" style="position: absolute; bottom: 20px; left: 20px; right: 20px; pointer-events: none;"> <button class="btn btn-secondary gallery-prev-btn" style="pointer-events: auto;"><i class="fas fa-chevron-left"></i></button> <button class="btn btn-secondary gallery-next-btn" style="pointer-events: auto;"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </div></div>