{% load unfold %}

<!-- Reusable Modal Component based on Unfold patterns -->
<div id="{{ modal_id|default:'modal' }}" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white dark:bg-base-900 rounded-lg shadow-2xl max-w-{{ max_width|default:'4xl' }} w-full max-h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
            
            <!-- Modal Header -->
            {% if title or closable %}
            <div class="flex items-center justify-between p-4 border-b border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                {% if title %}
                <div class="flex items-center space-x-3">
                    {% if icon %}
                    <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg">
                        <span class="material-icons text-primary-600 dark:text-primary-400">{{ icon }}</span>
                    </div>
                    {% endif %}
                    <div>
                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
                            {{ title }}
                        </h3>
                        {% if subtitle %}
                        <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
                            {{ subtitle }}
                        </p>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                
                {% if closable %}
                <button onclick="{{ close_function|default:'closeModal()' }}" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
                    <span class="material-icons">close</span>
                </button>
                {% endif %}
            </div>
            {% endif %}
            
            <!-- Modal Body -->
            <div class="flex-1 overflow-hidden p-4">
                {% if scrollable %}
                <div class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 h-full overflow-y-auto p-4">
                    {{ content }}
                </div>
                {% else %}
                {{ content }}
                {% endif %}
            </div>
            
            <!-- Modal Footer -->
            {% if footer %}
            <div class="flex items-center justify-between p-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                {{ footer }}
            </div>
            {% endif %}
        </div>
    </div>
</div>