orion/app/templates/shared/macros/modals.html

{#
  Modal Macros
  ============
  Reusable modal dialog components with Alpine.js integration.

  Usage:
    {% from 'shared/macros/modals.html' import modal, confirm_modal, form_modal %}

    Basic modal:
    {% call modal('editModal', 'Edit User', 'isEditModalOpen') %}
      <p>Modal content here</p>
    {% endcall %}

    Confirmation modal:
    {{ confirm_modal('deleteModal', 'Delete User', 'Are you sure?', 'deleteUser()', 'isDeleteModalOpen') }}

  Required Alpine.js:
    x-data="{ isModalOpen: false }"
#}


{#
  Modal
  =====
  A flexible modal dialog component.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - show_var: Alpine.js variable controlling visibility (default: 'isModalOpen')
    - size: 'sm' | 'md' | 'lg' | 'xl' | 'full' (default: 'md')
    - show_close: Whether to show close button (default: true)
    - show_footer: Whether to show footer slot (default: true)
    - close_on_backdrop: Close when clicking backdrop (default: true)
    - close_on_escape: Close on Escape key (default: true)
#}
{% macro modal(id, title, show_var='isModalOpen', size='md', show_close=true, show_footer=true, close_on_backdrop=true, close_on_escape=true) %}
{% set sizes = {
    'sm': 'max-w-sm',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl',
    'full': 'max-w-full mx-4'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    {% if close_on_escape %}@keydown.escape.window="{{ show_var }} = false"{% endif %}
    class="fixed inset-0 z-50 overflow-y-auto"
    aria-labelledby="{{ id }}-title"
    role="dialog"
    aria-modal="true"
>
    {# Backdrop #}
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        {% if close_on_backdrop %}@click="{{ show_var }} = false"{% endif %}
    ></div>

    {# Modal Container #}
    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            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"
            @click.stop
            class="relative w-full {{ sizes[size] }} bg-white dark:bg-gray-800 rounded-xl shadow-xl"
        >
            {# Header #}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 id="{{ id }}-title" class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ title }}
                </h3>
                {% if show_close %}
                <button
                    @click="{{ show_var }} = false"
                    class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    aria-label="Close modal"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
                {% endif %}
            </div>

            {# Body #}
            <div class="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
                {{ caller() }}
            </div>

            {# Footer (optional) #}
            {% if show_footer %}
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
                <button
                    @click="{{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                >
                    Cancel
                </button>
                {{ caller_footer() if caller_footer is defined else '' }}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endmacro %}


{#
  Modal Simple
  ============
  A simpler modal without the caller pattern - just pass content.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - show_var: Alpine.js variable controlling visibility
    - size: Modal size
    - content: HTML content for the modal body
#}
{% macro modal_simple(id, title, show_var='isModalOpen', size='md') %}
{% set sizes = {
    'sm': 'max-w-sm',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full {{ sizes[size] }} bg-white dark:bg-gray-800 rounded-xl shadow-xl"
        >
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
                <button
                    @click="{{ show_var }} = false"
                    class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="px-6 py-4">
                {{ caller() }}
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Confirm Modal
  =============
  A confirmation dialog for destructive actions.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - message: Confirmation message
    - confirm_action: Alpine.js action to execute on confirm
    - show_var: Alpine.js variable controlling visibility
    - confirm_text: Confirm button text (default: 'Confirm')
    - cancel_text: Cancel button text (default: 'Cancel')
    - variant: 'danger' | 'warning' | 'info' (default: 'danger')
    - icon: Icon name (optional, auto-selected based on variant)
#}
{% macro confirm_modal(id, title, message, confirm_action, show_var='isConfirmModalOpen', confirm_text='Confirm', cancel_text='Cancel', variant='danger', icon=none) %}
{% set variants = {
    'danger': {
        'icon_bg': 'bg-red-100 dark:bg-red-900/30',
        'icon_color': 'text-red-600 dark:text-red-400',
        'btn_class': 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
    },
    'warning': {
        'icon_bg': 'bg-yellow-100 dark:bg-yellow-900/30',
        'icon_color': 'text-yellow-600 dark:text-yellow-400',
        'btn_class': 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500'
    },
    'info': {
        'icon_bg': 'bg-blue-100 dark:bg-blue-900/30',
        'icon_color': 'text-blue-600 dark:text-blue-400',
        'btn_class': 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
    }
} %}
{% set icons = {
    'danger': 'exclamation-triangle',
    'warning': 'exclamation',
    'info': 'information-circle'
} %}
{% set modal_icon = icon if icon else icons[variant] %}
{% set style = variants[variant] %}

<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6"
        >
            <div class="flex items-start">
                <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full {{ style.icon_bg }}">
                    <span x-html="$icon('{{ modal_icon }}', 'w-6 h-6 {{ style.icon_color }}')" class="{{ style.icon_color }}"></span>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ title }}
                    </h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                        {{ message }}
                    </p>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <button
                    @click="{{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                >
                    {{ cancel_text }}
                </button>
                <button
                    @click="{{ confirm_action }}; {{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 {{ style.btn_class }}"
                >
                    {{ confirm_text }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Confirm Modal Dynamic
  =====================
  A confirmation dialog with dynamic message via Alpine.js variable.
  Use this when the confirmation message needs to include runtime data.

  Parameters:
    - id: Unique modal ID
    - title: Modal title (static string)
    - message_var: Alpine.js variable containing the message (e.g., 'confirmMessage')
    - confirm_action: Alpine.js action to execute on confirm
    - show_var: Alpine.js variable controlling visibility
    - confirm_text: Confirm button text (default: 'Confirm')
    - cancel_text: Cancel button text (default: 'Cancel')
    - variant: 'danger' | 'warning' | 'info' (default: 'danger')
    - icon: Icon name (optional, auto-selected based on variant)

  Example usage:
    State: { showConfirm: false, itemToDelete: null }
    Message var: `'Are you sure you want to delete "' + itemToDelete?.name + '"?'`

    {{ confirm_modal_dynamic(
        'deleteConfirm',
        'Delete Item',
        "'Are you sure you want to delete \"' + itemToDelete?.name + '\"?'",
        'deleteItem()',
        'showConfirm'
    ) }}
#}
{% macro confirm_modal_dynamic(id, title, message_var, confirm_action, show_var='isConfirmModalOpen', confirm_text='Confirm', cancel_text='Cancel', variant='danger', icon=none) %}
{% set variants = {
    'danger': {
        'icon_bg': 'bg-red-100 dark:bg-red-900/30',
        'icon_color': 'text-red-600 dark:text-red-400',
        'btn_class': 'bg-red-600 hover:bg-red-700 focus:ring-red-500'
    },
    'warning': {
        'icon_bg': 'bg-yellow-100 dark:bg-yellow-900/30',
        'icon_color': 'text-yellow-600 dark:text-yellow-400',
        'btn_class': 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500'
    },
    'info': {
        'icon_bg': 'bg-blue-100 dark:bg-blue-900/30',
        'icon_color': 'text-blue-600 dark:text-blue-400',
        'btn_class': 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'
    }
} %}
{% set icons = {
    'danger': 'exclamation-triangle',
    'warning': 'exclamation',
    'info': 'information-circle'
} %}
{% set modal_icon = icon if icon else icons[variant] %}
{% set style = variants[variant] %}

<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6"
        >
            <div class="flex items-start">
                <div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full {{ style.icon_bg }}">
                    <span x-html="$icon('{{ modal_icon }}', 'w-6 h-6 {{ style.icon_color }}')" class="{{ style.icon_color }}"></span>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        {{ title }}
                    </h3>
                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400" x-text="{{ message_var }}"></p>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <button
                    @click="{{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                >
                    {{ cancel_text }}
                </button>
                <button
                    @click="{{ confirm_action }}; {{ show_var }} = false"
                    type="button"
                    class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 {{ style.btn_class }}"
                >
                    {{ confirm_text }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Form Modal
  ==========
  A modal optimized for forms with loading state support.

  Parameters:
    - id: Unique modal ID
    - title: Modal title
    - show_var: Alpine.js variable controlling visibility
    - submit_action: Alpine.js action for form submission
    - submit_text: Submit button text (default: 'Save')
    - loading_var: Alpine.js variable for loading state (default: 'saving')
    - loading_text: Text shown while loading (default: 'Saving...')
    - size: Modal size (default: 'md')
#}
{% macro form_modal(id, title, show_var='isFormModalOpen', submit_action='submitForm()', submit_text='Save', loading_var='saving', loading_text='Saving...', size='md') %}
{% set sizes = {
    'sm': 'max-w-sm',
    'md': 'max-w-lg',
    'lg': 'max-w-2xl',
    'xl': 'max-w-4xl'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="!{{ loading_var }} && ({{ show_var }} = false)"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="!{{ loading_var }} && ({{ show_var }} = false)"
    ></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full {{ sizes[size] }} bg-white dark:bg-gray-800 rounded-xl shadow-xl"
        >
            <form @submit.prevent="{{ submit_action }}">
                {# Header #}
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
                    <button
                        @click="{{ show_var }} = false"
                        type="button"
                        :disabled="{{ loading_var }}"
                        class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                {# Body #}
                <div class="px-6 py-4 max-h-[calc(100vh-200px)] overflow-y-auto">
                    {{ caller() }}
                </div>

                {# Footer #}
                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
                    <button
                        @click="{{ show_var }} = false"
                        type="button"
                        :disabled="{{ loading_var }}"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        Cancel
                    </button>
                    <button
                        type="submit"
                        :disabled="{{ loading_var }}"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <span x-show="{{ loading_var }}" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
                        <span x-text="{{ loading_var }} ? '{{ loading_text }}' : '{{ submit_text }}'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Slide-over Panel
  ================
  A side panel that slides in from the right.

  Parameters:
    - id: Unique panel ID
    - title: Panel title
    - show_var: Alpine.js variable controlling visibility
    - width: 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
#}
{% macro slide_over(id, title, show_var='isPanelOpen', width='md') %}
{% set widths = {
    'sm': 'max-w-sm',
    'md': 'max-w-md',
    'lg': 'max-w-lg',
    'xl': 'max-w-xl'
} %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-hidden"
    role="dialog"
    aria-modal="true"
>
    {# Backdrop #}
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    {# Panel #}
    <div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="transform transition ease-in-out duration-300"
            x-transition:enter-start="translate-x-full"
            x-transition:enter-end="translate-x-0"
            x-transition:leave="transform transition ease-in-out duration-300"
            x-transition:leave-start="translate-x-0"
            x-transition:leave-end="translate-x-full"
            class="w-screen {{ widths[width] }}"
        >
            <div class="flex h-full flex-col bg-white dark:bg-gray-800 shadow-xl">
                {# Header #}
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h2>
                    <button
                        @click="{{ show_var }} = false"
                        class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                {# Body #}
                <div class="flex-1 overflow-y-auto px-6 py-4">
                    {{ caller() }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Job Details Modal
  =================
  A mobile-friendly modal for displaying import job details.
  Used in marketplace and imports admin pages.

  Parameters:
    - show_var: Alpine.js variable controlling visibility (default: 'showJobModal')
    - job_var: Alpine.js variable containing the job data (default: 'selectedJob')
    - close_action: Alpine.js action to close modal (default: 'closeJobModal()')
    - get_store_name: Function to get store name from ID (default: 'getStoreName')
    - show_created_by: Whether to show Created By field (default: false)

  Required Alpine.js state:
    - showJobModal: boolean
    - selectedJob: object with job data (fields: id, store_id, marketplace, status, source_url,
                   imported, updated, error_count, total_processed, started_at, completed_at, language)
    - closeJobModal(): function to close and clear
    - getStoreName(id): function to resolve store name
    - formatDate(date): function to format dates
#}
{% macro job_details_modal(show_var='showJobModal', job_var='selectedJob', close_action='closeJobModal()', get_store_name='getStoreName', show_created_by=false) %}
<div x-show="{{ show_var }}"
     x-cloak
     @click.away="{{ close_action }}"
     class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
     x-transition:enter="transition ease-out duration-150"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition ease-in duration-150"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0">
    <div @click.away="{{ close_action }}"
         class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl"
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 transform translate-y-1/2"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0 transform translate-y-1/2">
        {# Modal Header #}
        <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center space-x-3">
                <div class="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
                    <span x-html="$icon('cube', 'w-5 h-5 text-purple-600 dark:text-purple-400')"></span>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                        Import Job #<span x-text="{{ job_var }}?.id"></span>
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400" x-text="{{ job_var }}?.marketplace + ' Import'"></p>
                </div>
            </div>
            <button @click="{{ close_action }}" class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                <span x-html="$icon('close', 'w-5 h-5')"></span>
            </button>
        </div>

        {# Modal Content #}
        <div x-show="{{ job_var }}" class="py-4 space-y-6">
            {# Status Badge #}
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</span>
                <span class="px-3 py-1 font-semibold leading-tight rounded-full text-sm"
                      :class="{
                          'text-green-700 bg-green-100 dark:bg-green-900/30 dark:text-green-400': {{ job_var }}?.status === 'completed',
                          'text-blue-700 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400': {{ job_var }}?.status === 'processing',
                          'text-yellow-700 bg-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-400': {{ job_var }}?.status === 'pending',
                          'text-red-700 bg-red-100 dark:bg-red-900/30 dark:text-red-400': {{ job_var }}?.status === 'failed',
                          'text-orange-700 bg-orange-100 dark:bg-orange-900/30 dark:text-orange-400': {{ job_var }}?.status === 'completed_with_errors'
                      }"
                      x-text="{{ job_var }}?.status.replace('_', ' ').toUpperCase()">
                </span>
            </div>

            {# Progress Stats Cards #}
            <div class="grid grid-cols-4 gap-3">
                <div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
                    <p class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="{{ job_var }}?.imported ?? 0"></p>
                    <p class="text-xs text-green-700 dark:text-green-300 mt-1">Imported</p>
                </div>
                <div class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
                    <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="{{ job_var }}?.updated ?? 0"></p>
                    <p class="text-xs text-blue-700 dark:text-blue-300 mt-1">Updated</p>
                </div>
                <div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
                    <p class="text-2xl font-bold text-red-600 dark:text-red-400" x-text="{{ job_var }}?.error_count ?? 0"></p>
                    <p class="text-xs text-red-700 dark:text-red-300 mt-1">Errors</p>
                </div>
                <div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
                    <p class="text-2xl font-bold text-gray-600 dark:text-gray-300" x-text="{{ job_var }}?.total_processed ?? 0"></p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Total</p>
                </div>
            </div>

            {# Details Table #}
            <div class="overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 w-1/3">Store</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="{{ get_store_name }}({{ job_var }}?.store_id)"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">Marketplace</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="{{ job_var }}?.marketplace"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">Language</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                                <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-600 rounded text-xs font-mono" x-text="{{ job_var }}?.language || 'en'"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">Source URL</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                                <span class="break-all text-xs font-mono" x-text="{{ job_var }}?.source_url"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">Started At</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="{{ job_var }}?.started_at ? formatDate({{ job_var }}.started_at) : 'Not started'"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">Completed At</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="{{ job_var }}?.completed_at ? formatDate({{ job_var }}.completed_at) : 'In progress'"></td>
                        </tr>
                        {% if show_created_by %}
                        <tr>
                            <td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">Created By</td>
                            <td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="{{ job_var }}?.created_by_name || 'System'"></td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>

            {# Error Message #}
            <div x-show="{{ job_var }}?.error_message" class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                <div class="flex items-start">
                    <span x-html="$icon('exclamation-circle', 'w-5 h-5 text-red-500 dark:text-red-400 mt-0.5 mr-2 flex-shrink-0')"></span>
                    <div>
                        <p class="text-sm font-medium text-red-800 dark:text-red-300">Error Message</p>
                        <p class="text-sm text-red-700 dark:text-red-400 mt-1" x-text="{{ job_var }}?.error_message"></p>
                    </div>
                </div>
            </div>

            {# Detailed Import Errors #}
            <div x-show="{{ job_var }}?.error_count > 0">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Import Errors</p>
                    <button
                        x-show="!jobErrors || jobErrors.length === 0"
                        @click="loadJobErrors({{ job_var }}?.id)"
                        :disabled="loadingErrors"
                        class="px-3 py-1 text-xs font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-50"
                    >
                        <span x-show="loadingErrors" x-html="$icon('spinner', 'w-3 h-3 mr-1 inline')"></span>
                        <span x-text="loadingErrors ? 'Loading...' : 'View Errors'"></span>
                    </button>
                </div>

                {# Errors List #}
                <div x-show="jobErrors && jobErrors.length > 0" class="space-y-2 max-h-64 overflow-y-auto">
                    <template x-for="error in jobErrors" :key="error.id">
                        <div class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <div class="flex items-center gap-2 mb-1">
                                        <span class="px-2 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-300 rounded" x-text="error.error_type"></span>
                                        <span class="text-xs text-gray-500 dark:text-gray-400">Row <span x-text="error.row_number"></span></span>
                                    </div>
                                    <p class="text-sm text-red-700 dark:text-red-300" x-text="error.error_message"></p>
                                    <p x-show="error.identifier" class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        ID: <span class="font-mono" x-text="error.identifier"></span>
                                    </p>
                                </div>
                                <button
                                    x-show="error.row_data"
                                    @click="error._expanded = !error._expanded"
                                    class="ml-2 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                                    :title="error._expanded ? 'Hide row data' : 'Show row data'"
                                >
                                    <span x-html="$icon(error._expanded ? 'chevron-up' : 'chevron-down', 'w-4 h-4')"></span>
                                </button>
                            </div>
                            {# Expandable row data #}
                            <div x-show="error._expanded && error.row_data" x-collapse class="mt-2 pt-2 border-t border-red-200 dark:border-red-700">
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Row Data:</p>
                                <pre class="text-xs text-gray-600 dark:text-gray-300 font-mono whitespace-pre-wrap bg-white dark:bg-gray-800 p-2 rounded" x-text="JSON.stringify(error.row_data, null, 2)"></pre>
                            </div>
                        </div>
                    </template>
                </div>

                {# Pagination for errors #}
                <div x-show="jobErrorsTotal > jobErrors?.length" class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                    <span>Showing <span x-text="jobErrors?.length"></span> of <span x-text="jobErrorsTotal"></span> errors</span>
                    <button
                        @click="loadMoreJobErrors({{ job_var }}?.id)"
                        :disabled="loadingErrors"
                        class="text-purple-600 dark:text-purple-400 hover:underline disabled:opacity-50"
                    >
                        Load more
                    </button>
                </div>
            </div>
        </div>

        {# Modal Footer #}
        <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
                @click="{{ close_action }}"
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
            >
                Close
            </button>
        </div>
    </div>
</div>
{% endmacro %}


{#
  Media Picker Modal
  ==================
  A modal for selecting images from the store's media library.
  Supports browsing existing media, uploading new files, and single/multi-select.

  Parameters:
    - id: Unique modal ID (default: 'mediaPicker')
    - show_var: Alpine.js variable controlling visibility (default: 'showMediaPicker')
    - store_id_var: Variable containing store ID (default: 'storeId')
    - on_select: Callback function when images are selected (default: 'onMediaSelected')
    - multi_select: Allow selecting multiple images (default: false)
    - title: Modal title (default: 'Select Image')

  Required Alpine.js state:
    - showMediaPicker: boolean
    - storeId: number
    - mediaPickerState: object (managed by initMediaPicker())
    - onMediaSelected(images): callback function

  Usage:
    {% from 'shared/macros/modals.html' import media_picker_modal %}
    {{ media_picker_modal(store_id_var='form.store_id', on_select='setMainImage', multi_select=false) }}
#}
{% macro media_picker_modal(id='mediaPicker', show_var='showMediaPicker', store_id_var='storeId', on_select='onMediaSelected', multi_select=false, title='Select Image') %}
<div
    x-show="{{ show_var }}"
    x-cloak
    @keydown.escape.window="{{ show_var }} = false"
    class="fixed inset-0 z-50 overflow-y-auto"
    role="dialog"
    aria-modal="true"
>
    {# Backdrop #}
    <div
        x-show="{{ show_var }}"
        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 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
        @click="{{ show_var }} = false"
    ></div>

    {# Modal Container #}
    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="{{ show_var }}"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
            class="relative w-full max-w-4xl bg-white dark:bg-gray-800 rounded-xl shadow-xl"
            x-init="$watch('{{ show_var }}', value => value && loadMediaLibrary())"
        >
            {# Header #}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ title }}
                    {% if multi_select %}
                    <span class="ml-2 text-sm font-normal text-gray-500 dark:text-gray-400">(select multiple)</span>
                    {% endif %}
                </h3>
                <button
                    type="button"
                    @click="{{ show_var }} = false"
                    class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

            {# Toolbar #}
            <div class="px-6 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                <div class="flex items-center justify-between gap-4">
                    {# Search #}
                    <div class="flex-1 max-w-xs">
                        <div class="relative">
                            <span x-html="$icon('search', 'absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400')"></span>
                            <input
                                type="text"
                                x-model="mediaPickerState.search"
                                @input.debounce.300ms="loadMediaLibrary()"
                                placeholder="Search images..."
                                class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                            />
                        </div>
                    </div>

                    {# Upload Button #}
                    <div>
                        <label class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 cursor-pointer transition-colors">
                            <span x-html="$icon('upload', 'w-4 h-4 mr-2')"></span>
                            Upload New
                            <input
                                type="file"
                                accept="image/*"
                                @change="uploadMediaFile($event)"
                                class="hidden"
                                :disabled="mediaPickerState.uploading"
                            />
                        </label>
                    </div>
                </div>

                {# Upload Progress #}
                <div x-show="mediaPickerState.uploading" class="mt-3">
                    <div class="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400">
                        <span x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
                        <span>Uploading...</span>
                    </div>
                </div>
            </div>

            {# Media Grid #}
            <div class="px-6 py-4 max-h-[400px] overflow-y-auto">
                {# Loading State #}
                <div x-show="mediaPickerState.loading" class="flex items-center justify-center py-12">
                    <span x-html="$icon('spinner', 'w-8 h-8 text-purple-600 animate-spin')"></span>
                </div>

                {# Empty State #}
                <div x-show="!mediaPickerState.loading && mediaPickerState.media.length === 0" class="text-center py-12">
                    <span x-html="$icon('photograph', 'w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-4')"></span>
                    <p class="text-gray-500 dark:text-gray-400">No images found</p>
                    <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Upload an image to get started</p>
                </div>

                {# Image Grid #}
                <div x-show="!mediaPickerState.loading && mediaPickerState.media.length > 0" class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-3">
                    <template x-for="media in mediaPickerState.media" :key="media.id">
                        <div
                            @click="toggleMediaSelection(media)"
                            class="relative aspect-square rounded-lg overflow-hidden cursor-pointer border-2 transition-all"
                            :class="isMediaSelected(media.id) ? 'border-purple-500 ring-2 ring-purple-500/50' : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600'"
                        >
                            <img
                                :src="media.thumbnail_url || media.url"
                                :alt="media.alt_text || media.filename"
                                class="w-full h-full object-cover"
                            />
                            {# Selection Indicator #}
                            <div
                                x-show="isMediaSelected(media.id)"
                                class="absolute inset-0 bg-purple-500/20 flex items-center justify-center"
                            >
                                <span class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
                                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </span>
                            </div>
                            {# Filename tooltip #}
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2">
                                <p class="text-xs text-white truncate" x-text="media.filename"></p>
                            </div>
                        </div>
                    </template>
                </div>

                {# Pagination #}
                <div x-show="mediaPickerState.total > mediaPickerState.media.length" class="mt-4 text-center">
                    <button
                        type="button"
                        @click="loadMoreMedia()"
                        :disabled="mediaPickerState.loading"
                        class="px-4 py-2 text-sm text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors disabled:opacity-50"
                    >
                        Load more (<span x-text="mediaPickerState.media.length"></span> of <span x-text="mediaPickerState.total"></span>)
                    </button>
                </div>
            </div>

            {# Footer #}
            <div class="flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    <span x-show="mediaPickerState.selected.length > 0">
                        <span x-text="mediaPickerState.selected.length"></span> selected
                    </span>
                </div>
                <div class="flex items-center gap-3">
                    <button
                        @click="{{ show_var }} = false"
                        type="button"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                    >
                        Cancel
                    </button>
                    <button
                        @click="confirmMediaSelection()"
                        :disabled="mediaPickerState.selected.length === 0"
                        type="button"
                        class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        {% if multi_select %}
                        Add Selected
                        {% else %}
                        Select Image
                        {% endif %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endmacro %}