<div class="rounded-2xl border border-border bg-card shadow-sm">
    <div class="p-5 space-y-4">
        <form id="restoreDatabaseForm"
              action="<?php echo base_url() ?>admin/settings/restore_database"
              method="post" enctype="multipart/form-data" class="space-y-4"
              data-modal-native-submit="true">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <h4 class="text-base font-semibold text-foreground"><?= lang('restore_database') ?></h4>
                    <p class="text-xs text-muted-foreground">Upload a ZIP backup to restore the database.</p>
                </div>
                <button type="button" class="text-muted-foreground hover:text-foreground" data-dismiss="modal" aria-label="<?= lang('close') ?>">&times;</button>
            </div>
            <div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
                <?= lang('restore_notice'); ?>
            </div>
            <?= form_attachment_group('upload_file', lang('upload') . ' ' . lang('database_backup') . ' ' . lang('zipped_file'), 'file'); ?>
            <div class="flex flex-wrap items-center gap-2 rounded-xl border border-dashed border-border bg-muted/10 px-4 py-3">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-600/10 text-indigo-600">
                    <i data-lucide="file-archive" class="h-5 w-5"></i>
                </div>
                <div class="min-w-0 flex-1">
                    <div class="text-sm font-semibold text-foreground">Selected backup</div>
                    <div id="restoreDatabaseFileName" class="truncate text-xs text-muted-foreground">No file selected</div>
                </div>
                <button type="button" id="restoreDatabaseClearFile" class="hidden inline-flex items-center gap-1 rounded-lg border border-border bg-card px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
                    <i data-lucide="x" class="h-3.5 w-3.5"></i>
                    Clear
                </button>
            </div>
            <div id="restoreDatabaseProgress" class="hidden rounded-xl border border-border bg-muted/20 p-4">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold text-foreground">Restoring database</div>
                        <div id="restoreDatabaseProgressText" class="text-xs text-muted-foreground">Waiting to start</div>
                    </div>
                    <div id="restoreDatabaseProgressPercent" class="text-sm font-semibold text-foreground">0%</div>
                </div>
                <div class="mt-3 h-2 overflow-hidden rounded-full bg-muted">
                    <div id="restoreDatabaseProgressBar" class="h-full w-0 rounded-full bg-indigo-600 transition-all duration-300"></div>
                </div>
                <div id="restoreDatabaseProgressDetail" class="mt-2 text-xs text-muted-foreground"></div>
            </div>
            <div class="flex items-center justify-end gap-0">
                <button id="restoreDatabaseBtn" type="submit" class="update_kr btn ml-1 btn-primary h-9 mb-1 btn-xs">
                    <i data-lucide="check-circle" class="h-3.5 w-3.5 mr-2"></i>
                    <?= lang('restore_database') ?>
                </button>
                <?= btn_modal_close(lang('close')) ?>
            </div>
        </form>
    </div>
</div>
