{# No inline script: static/v3/js/pages/cache.js runs this page. The page
   registry (static/v3/js/core/registry.js) starts it when this root appears
   and stops it when the partial is swapped away. #}
<div class="bg-white rounded-lg shadow p-6" data-page="cache">
    <div class="border-b border-gray-200 pb-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900">Cache Management</h2>
        <p class="mt-1 text-sm text-gray-600">View and manage cached API responses. Cache files help reduce API calls and improve performance.</p>
    </div>

    <!-- Cache Info -->
    <div id="cache-info" class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-blue-900">Cache Directory</p>
                <p id="cache-dir" class="text-sm text-blue-700 font-mono mt-1">Loading...</p>
            </div>
            <button type="button" id="refresh-cache-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm">
                <i class="fas fa-sync-alt mr-2"></i>Refresh
            </button>
        </div>
    </div>

    <!-- Cache Files Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cache Key</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modified</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody id="cache-files-tbody" class="bg-white divide-y divide-gray-200">
                <tr>
                    <td colspan="5" class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                        <p>Loading cache files...</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Empty State -->
    <div id="cache-empty" class="hidden text-center py-12">
        <i class="fas fa-database text-4xl text-gray-400 mb-4"></i>
        <p class="text-gray-600">No cache files found</p>
        <p class="text-sm text-gray-500 mt-2">Cache files will appear here as plugins fetch data from APIs</p>
    </div>

    <!-- Error State -->
    <div id="cache-error" class="hidden text-center py-12">
        <i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>
        <p class="text-red-600" id="cache-error-message">Error loading cache files</p>
    </div>
</div>