{# Generic Modal Component #}
<div 
  id="{% block modal_id %}generic-modal{% endblock %}" 
  x-data="{ showModal: false, actionUrl: '', modalId: '{% block modal_event_id %}generic-modal{% endblock %}', closeEventId: '{% block modal_event_id_close %}generic-modal{% endblock %}' }"
  x-show="showModal"
  x-on:open-modal.window="
    if ($event.detail.id === modalId) {
      showModal = true;
      if ($event.detail.url) { actionUrl = $event.detail.url; }
    }"
  x-on:close-modal.window="
    if ($event.detail.id === closeEventId) {
      showModal = false;
      actionUrl = '';
    }"
  x-on:keydown.escape.window="
    if (showModal) {
      showModal = false;
      actionUrl = '';
      window.dispatchEvent(new CustomEvent('gobii-modal-dismissed', {
        detail: { id: closeEventId, reason: 'escape' }
      }));
    }"
  x-cloak
  class="{% block modal_root_class %}fixed inset-0 z-50 overflow-y-auto{% endblock %}"
  aria-labelledby="modal-title"
  role="dialog"
  x-bind:aria-hidden="showModal ? 'false' : 'true'"
  aria-modal="true"
>
  <div class="flex min-h-full items-start sm:items-center justify-center p-4 pb-20 text-center sm:p-6 sm:pb-6 sm:text-left">

    {# Backdrop with transition #}
    <div x-show="showModal" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 backdrop-blur-sm transition-opacity" 
         data-modal-backdrop
         aria-hidden="true"
         @click="
           if (showModal) {
             showModal = false;
             actionUrl = '';
             window.dispatchEvent(new CustomEvent('gobii-modal-dismissed', {
               detail: { id: closeEventId, reason: 'backdrop' }
             }));
           }"> {# Close on backdrop click #}
    </div>

    {# Modal panel with transition #}
    <div x-show="showModal"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         class="relative z-50 w-full bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:w-full {% block modal_size_class %}sm:max-w-md{% endblock %}"
         @click.stop {# Prevent closing modal when clicking inside #}
    >
      {# Optional Header #}
      {% block modal_header %}
      <div class="px-6 py-4 flex justify-between items-center border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900" id="modal-title">{% block modal_title %}Modal Title{% endblock %}</h3>
        <button type="button" 
                class="text-gray-400 hover:text-gray-500"
                @click="showModal = false">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      {% endblock modal_header %}
      
      {# Main Content Body #}
      <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4 {% block modal_body_padding %}bg-white{% endblock %}"> 
        <div class="sm:flex sm:items-start">
          {% block modal_icon_area %}
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full {% block modal_icon_bg %}bg-blue-100{% endblock %} sm:mx-0 sm:h-10 sm:w-10">
            {% block modal_icon %}
            {# Default placeholder icon #}
            <svg class="h-6 w-6 {% block modal_icon_color %}text-blue-600{% endblock %}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
            </svg>
            {% endblock modal_icon %}
          </div>
          {% endblock modal_icon_area %}
          <div class="mt-3 text-center sm:mt-0 {% block modal_content_margin %}sm:ml-4{% endblock %} sm:text-left flex-1">
            {% block modal_body_title %}
              {# Optionally override the main title within the body if header is hidden #}
              {% if not modal_header %}
              <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2" id="modal-title-body">
                {% block modal_title_in_body %}{% endblock %}
              </h3>
              {% endif %}
            {% endblock modal_body_title %}
            
            {% block modal_body %}
            {# Modal content goes here #}
            <p class="text-sm text-gray-500">Your modal content appears here.</p>
            {% endblock modal_body %}
          </div>
        </div>
      </div>

      {# Footer / Button Area #}
      <div class="{% block modal_footer_bg %}bg-gray-50{% endblock %} px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        {% block modal_footer %}
        {# Buttons go here #}
        <button type="button" 
                class="inline-flex w-full justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
                @click="showModal = false"> {# Default action closes modal #}
          OK
        </button>
        <button type="button" 
                class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                @click="showModal = false">
          Cancel
        </button>
        {% endblock modal_footer %}
      </div>
    </div>
  </div>
</div>