{{-- Execute confirm --}}
<div id="executeConfirmModal" class="hidden fixed inset-0 z-[80]">
    <div class="absolute inset-0 bg-slate-900/50" data-close-modal="executeConfirmModal"></div>
    <div class="relative min-h-full flex items-center justify-center p-4">
        <div class="w-full max-w-lg bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden">
            <div class="px-5 py-4 bg-red-600 text-white flex items-center justify-between">
                <h5 class="font-semibold flex items-center gap-2">
                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                    Confirm Execute Import
                </h5>
                <button type="button" class="text-white/80 hover:text-white" data-close-modal="executeConfirmModal">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-5 py-4 text-sm text-slate-700 space-y-3">
                <p>Thao tác này sẽ <strong>copy section trên Moodle</strong> và sync local DB.</p>
                <ul class="list-disc pl-5 space-y-1" id="executeConfirmList"></ul>
            </div>
            <div class="px-5 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" class="px-4 py-2 rounded-lg border border-slate-300 text-sm font-medium text-slate-700 hover:bg-white" data-close-modal="executeConfirmModal">Cancel</button>
                <button type="button" id="btnConfirmExecute" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium">Yes, execute</button>
            </div>
        </div>
    </div>
</div>

{{-- Delete sections confirm --}}
<div id="deleteConfirmModal" class="hidden fixed inset-0 z-[80]">
    <div class="absolute inset-0 bg-slate-900/50" data-close-modal="deleteConfirmModal"></div>
    <div class="relative min-h-full flex items-center justify-center p-4">
        <div class="w-full max-w-lg bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden">
            <div class="px-5 py-4 bg-red-800 text-white flex items-center justify-between">
                <h5 class="font-semibold flex items-center gap-2">
                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                    Confirm Delete Sections
                </h5>
                <button type="button" class="text-white/80 hover:text-white" data-close-modal="deleteConfirmModal">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-5 py-4 text-sm text-slate-700 space-y-3">
                <p>Thao tác này sẽ <strong>xóa vĩnh viễn</strong> các section đã chọn trên Moodle và local DB. <strong>Không thể hoàn tác.</strong></p>
                <ul class="list-disc pl-5 space-y-1" id="deleteConfirmList"></ul>
            </div>
            <div class="px-5 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" class="px-4 py-2 rounded-lg border border-slate-300 text-sm font-medium text-slate-700 hover:bg-white" data-close-modal="deleteConfirmModal">Cancel</button>
                <button type="button" id="btnConfirmDelete" class="px-4 py-2 rounded-lg bg-red-800 hover:bg-red-900 text-white text-sm font-medium">Yes, delete now</button>
            </div>
        </div>
    </div>
</div>

{{-- Merge sections confirm --}}
<div id="mergeConfirmModal" class="hidden fixed inset-0 z-[80]">
    <div class="absolute inset-0 bg-slate-900/50" data-close-modal="mergeConfirmModal"></div>
    <div class="relative min-h-full flex items-center justify-center p-4">
        <div class="w-full max-w-lg bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden">
            <div class="px-5 py-4 bg-indigo-700 text-white flex items-center justify-between">
                <h5 class="font-semibold flex items-center gap-2">
                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                    Confirm Merge Sections
                </h5>
                <button type="button" class="text-white/80 hover:text-white" data-close-modal="mergeConfirmModal">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-5 py-4 text-sm text-slate-700 space-y-3">
                <p>Thao tác này sẽ <strong>chuyển activity</strong> sang section đích, <strong>đổi tên</strong> section đích, và <strong>xóa section nguồn nếu empty</strong>.</p>
                <ul class="list-disc pl-5 space-y-1" id="mergeConfirmList"></ul>
            </div>
            <div class="px-5 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-2">
                <button type="button" class="px-4 py-2 rounded-lg border border-slate-300 text-sm font-medium text-slate-700 hover:bg-white" data-close-modal="mergeConfirmModal">Cancel</button>
                <button type="button" id="btnConfirmMerge" class="px-4 py-2 rounded-lg bg-indigo-700 hover:bg-indigo-800 text-white text-sm font-medium">Yes, merge now</button>
            </div>
        </div>
    </div>
</div>

{{-- Run detail --}}
<div id="runDetailModal" class="hidden fixed inset-0 z-[80]">
    <div class="absolute inset-0 bg-slate-900/50" data-close-modal="runDetailModal"></div>
    <div class="relative min-h-full flex items-center justify-center p-4">
        <div class="w-full max-w-3xl bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
                <h5 class="font-semibold text-slate-800">Run detail</h5>
                <button type="button" class="text-slate-400 hover:text-slate-600" data-close-modal="runDetailModal">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-5 py-4">
                <pre id="runDetailBox" class="max-h-[480px] overflow-auto bg-slate-50 border border-slate-200 rounded-lg p-3 text-xs text-slate-700 whitespace-pre-wrap"></pre>
            </div>
        </div>
    </div>
</div>