{{-- エクスポート進捗モーダル --}}
<div x-show="showExportModal" 
     x-cloak 
     class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
     @click.self="closeExportModal()">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        
        {{-- ヘッダー --}}
        <div class="flex items-center justify-between pb-3 border-b">
            <h3 class="text-lg font-medium text-gray-900">Excelエクスポート</h3>
            <button 
                @click="closeExportModal()" 
                :disabled="exportStatus === 'processing'"
                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 disabled:opacity-50 disabled:cursor-not-allowed">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>

        {{-- エクスポート進捗 --}}
        <div class="mt-4">
            
            {{-- 準備中 --}}
            <template x-if="exportStatus === 'pending'">
                <div class="text-center py-6">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
                    <p class="mt-2 text-sm text-gray-600">エクスポートを準備しています...</p>
                    <p class="text-xs text-gray-500 mt-1" x-text="'対象件数: ' + exportRecordCount + '件'"></p>
                </div>
            </template>

            {{-- 処理中 --}}
            <template x-if="exportStatus === 'processing'">
                <div class="py-6">
                    <div class="text-center mb-4">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
                        <p class="mt-2 text-sm text-gray-600">エクスポートを処理中です...</p>
                    </div>
                    
                    {{-- プログレスバー --}}
                    <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                        <div 
                            class="bg-primary-600 h-2 rounded-full transition-all duration-500"
                            :style="'width: ' + exportProgress + '%'">
                        </div>
                    </div>
                    <div class="flex justify-between text-xs text-gray-600">
                        <span x-text="'処理済み: ' + exportProcessedCount + '件'"></span>
                        <span x-text="exportProgress + '%'"></span>
                    </div>
                    
                    <p class="text-xs text-gray-500 text-center mt-2">
                        大量データの場合、数分かかる場合があります
                    </p>
                </div>
            </template>

            {{-- 完了 --}}
            <template x-if="exportStatus === 'completed'">
                <div class="text-center py-6">
                    <svg class="mx-auto h-12 w-12 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="mt-2 text-sm font-medium text-gray-900">エクスポート完了</p>
                    <p class="text-xs text-gray-500 mt-1" x-text="'ファイルサイズ: ' + formatFileSize(exportFileSize)"></p>
                </div>
            </template>

            {{-- エラー --}}
            <template x-if="exportStatus === 'failed'">
                <div class="text-center py-6">
                    <svg class="mx-auto h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="mt-2 text-sm font-medium text-red-600">エクスポートエラー</p>
                    <p class="text-xs text-gray-500 mt-1" x-text="exportErrorMessage"></p>
                </div>
            </template>
        </div>

        {{-- フッター --}}
        <div class="mt-6 pt-4 border-t flex justify-end space-x-3">
            <template x-if="exportStatus === 'completed'">
                <button 
                    @click="downloadExportFile()"
                    class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm">
                    <svg class="w-4 h-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    ダウンロード
                </button>
            </template>
            
            <template x-if="exportStatus === 'failed'">
                <button 
                    @click="retryExport()"
                    class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 text-sm">
                    再試行
                </button>
            </template>
            
            <button 
                @click="closeExportModal()"
                :disabled="exportStatus === 'processing'"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
                <template x-if="exportStatus === 'processing'">
                    <span>処理中...</span>
                </template>
                <template x-if="exportStatus !== 'processing'">
                    <span>閉じる</span>
                </template>
            </button>
        </div>
    </div>
</div>