{% macro render_confirm_modal(modal_id, title, message, confirm_url,
                               confirm_text='Confirm', cancel_text='Cancel', method='POST') %}
<div id="{{ modal_id }}"
     class="fin-modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby="{{ modal_id }}-title"
     style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
            z-index: 50; align-items: center; justify-content: center;">
  <div class="fin-modal-content"
       style="background: #fff; border-radius: 6px; padding: 24px; max-width: 420px;
              width: 90%; border: 1px solid #d0d7de; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
    <h2 id="{{ modal_id }}-title"
        style="font-size: 18px; font-weight: 600; margin: 0 0 12px 0; color: #1f2328;">
      {{ title }}
    </h2>
    <p style="color: #636c76; margin: 0 0 24px 0; font-size: 14px;">{{ message }}</p>
    <div style="display: flex; gap: 8px; justify-content: flex-end;">
      <button type="button"
              data-close-modal="{{ modal_id }}"
              style="padding: 8px 16px; border: 1px solid #d0d7de; border-radius: 6px;
                     background: #fff; cursor: pointer; font-size: 14px;">
        {{ cancel_text }}
      </button>
      <button type="button"
              data-confirm-url="{{ confirm_url }}"
              data-confirm-method="{{ method }}"
              style="padding: 8px 16px; background: #cf222e; color: #fff; border: none;
                     border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;">
        {{ confirm_text }}
      </button>
    </div>
  </div>
</div>
{% endmacro %}

{% macro render_confirm_trigger(modal_id, label, css_class='') %}
<button type="button"
        data-confirm-target="{{ modal_id }}"
        class="{{ css_class }}"
        style="cursor: pointer;">
  {{ label }}
</button>
{% endmacro %}