<?php

declare(strict_types=1);

require_once __DIR__ . '/../includes/layout.php';

auth_require();

render_header('title_database', ['layout' => 'admin', 'page' => 'database']);
render_flash();

page_heading('database_title', 'database_sub');
?>

<div class="flex justify-end mb-4">
    <button type="button" id="idbRefreshBtn" class="btn-secondary">
        <span class="material-symbols-rounded">refresh</span>
        <?= e(__('idb_refresh')) ?>
    </button>
</div>

<div id="idbLoading" class="card mb-4">
    <div class="empty-state !py-10">
        <div class="empty-state-icon">
            <span class="material-symbols-rounded animate-pulse">storage</span>
        </div>
        <p class="text-karvi-500 text-sm"><?= e(__('idb_loading')) ?></p>
    </div>
</div>

<div id="idbEmpty" class="hidden card">
    <div class="empty-state">
        <div class="empty-state-icon">
            <span class="material-symbols-rounded">database</span>
        </div>
        <h3 class="font-display font-bold text-xl text-karvi-950 mb-2"><?= e(__('idb_empty')) ?></h3>
        <p class="text-karvi-500 text-sm max-w-sm mx-auto"><?= e(__('idb_empty_sub')) ?></p>
    </div>
</div>

<div id="idbTableWrap" class="hidden data-table-wrap">
    <table class="data-table">
        <thead>
            <tr>
                <th><?= e(__('idb_col_database')) ?></th>
                <th><?= e(__('idb_col_store')) ?></th>
                <th><?= e(__('idb_col_key')) ?></th>
                <th><?= e(__('idb_col_records')) ?></th>
                <th><?= e(__('idb_col_size')) ?></th>
                <th><?= e(__('idb_col_keys')) ?></th>
                <th><?= e(__('idb_col_actions')) ?></th>
            </tr>
        </thead>
        <tbody id="idbTableBody"></tbody>
    </table>
</div>

<div id="idbViewModal" class="admin-modal hidden" role="dialog" aria-modal="true" aria-labelledby="idbViewModalTitle">
    <div class="admin-modal-backdrop" data-idb-modal-close></div>
    <div class="admin-modal-dialog max-w-3xl w-full">
        <div class="admin-modal-head">
            <h3 id="idbViewModalTitle" class="font-display font-bold text-lg text-karvi-950"></h3>
            <p class="text-sm text-karvi-500 mt-1"><?= e(__('idb_view_sub')) ?></p>
        </div>
        <div class="admin-modal-body">
            <pre id="idbViewModalContent" class="idb-json-view"></pre>
            <div class="admin-modal-actions">
                <button type="button" class="btn-secondary" data-idb-modal-close><?= e(__('cancel')) ?></button>
            </div>
        </div>
    </div>
</div>

<script>
window.KARVI_IDB_ADMIN = <?= json_encode([
    'contractsApiUrl' => app_path('/admin/api/contracts'),
    'labels' => [
        'idb_view' => __('idb_view'),
        'idb_delete' => __('idb_delete'),
        'idb_download' => __('idb_download'),
        'idb_sync_loading' => __('idb_sync_loading'),
        'idb_sync_success' => __('idb_sync_success'),
        'idb_sync_error' => __('idb_sync_error'),
        'idb_delete_confirm' => __('idb_delete_confirm'),
        'idb_delete_error' => __('idb_delete_error'),
        'idb_delete_blocked' => __('idb_delete_blocked'),
        'idb_load_error' => __('idb_load_error'),
        'idb_not_supported' => __('idb_not_supported'),
        'idb_unavailable' => __('idb_unavailable'),
        'idb_db_contracts' => __('idb_db_contracts'),
        'idb_store_contracts' => __('idb_store_contracts'),
    ],
], JSON_UNESCAPED_UNICODE) ?>;
</script>

<?php
render_footer([
    'layout' => 'admin',
    'scripts' => [
        '/assets/js/indexeddb-registry.js',
        '/assets/js/contracts-indexeddb.js',
        '/assets/js/admin-database.js',
    ],
]);
