{% with 
    icon_data = {
        'info': {
            'alert': 'alert-primary',
            'icon_src': '/static/img/icon_modal_confirm.png'
        },
        'warning': {
            'alert': 'alert-warning',
            'icon_src': '/static/img/icon_modal_error.png'
        }
    }
%}
<div class="modal fade" id="{{modal_id}}" tabindex="-1" aria-labelledby="{{modal_id}}ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header alert {{icon_data[icon_key]['alert']}} d-flex align-items-center">
          <h5 class="modal-title" id="exampleModalLabel">{{modal_title}}</h5>
          <button type="button" id="{{modal_id}}_close" onclick="{{modal_close_event}}" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <img src="{{icon_data[icon_key]['icon_src']}}" loading="lazy" style="width: 50px;">
          {% autoescape False %}
          {{message}}
          {% endautoescape %}
        </div>
        <div class="modal-footer">
          {% for button in buttons%}
          <button type="button"
            id="{{button['id']}}"
            class="{{button['class']}}"
            data-bs-dismiss="{{button.dismiss}}"
            {% if button.get('onclick_event') %} onclick="{{button['onclick_event']}}" {% endif %}>
            {{button.text}}
        </button>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
{% endwith %}
