{# No inline script: static/v3/js/pages/operation-history.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="operation-history">
    <div class="border-b border-gray-200 pb-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-900">Operation History</h2>
        <p class="mt-1 text-sm text-gray-600">View history of plugin operations and configuration changes for debugging and auditing.</p>
    </div>

    <!-- Controls -->
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <div class="flex items-center space-x-4">
            <!-- Filter by Plugin -->
            <select id="history-plugin-filter" class="form-control text-sm" aria-label="Filter by plugin">
                <option value="">All Plugins</option>
            </select>

            <!-- Filter by Operation Type -->
            <select id="history-type-filter" class="form-control text-sm" aria-label="Filter by operation type">
                <option value="">All Operations</option>
                <option value="install">Install</option>
                <option value="update">Update</option>
                <option value="uninstall">Uninstall</option>
                <option value="enable">Enable</option>
                <option value="disable">Disable</option>
                <option value="configure">Configure</option>
            </select>

            <!-- Filter by Status -->
            <select id="history-status-filter" class="form-control text-sm" aria-label="Filter by status">
                <option value="">All Statuses</option>
                <option value="success">Success</option>
                <option value="failed">Failed</option>
            </select>

            <!-- Search -->
            <div class="relative">
                <input type="text" id="history-search" placeholder="Search operations..." aria-label="Search operations" class="form-control text-sm pl-8 pr-4 py-1 w-48">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs" aria-hidden="true"></i>
            </div>
        </div>

        <div class="flex items-center space-x-2">
            <!-- Refresh -->
            <button type="button" id="refresh-history-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
                <i class="fas fa-sync-alt mr-1"></i>Refresh
            </button>

            <!-- Clear History -->
            <button type="button" id="clear-history-btn" class="btn bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
                <i class="fas fa-trash mr-1"></i>Clear
            </button>
        </div>
    </div>

    <!-- History 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">Timestamp</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Plugin</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
                </tr>
            </thead>
            <tbody id="history-table-body" class="bg-white divide-y divide-gray-200">
                <tr>
                    <td colspan="6" class="px-6 py-4 text-center text-gray-500">
                        <div class="animate-pulse">
                            <div class="h-4 bg-gray-200 rounded w-1/4 mx-auto"></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4 flex items-center justify-between">
        <div class="text-sm text-gray-700">
            Showing <span id="history-start">0</span> to <span id="history-end">0</span> of <span id="history-total">0</span> operations
        </div>
        <div class="flex space-x-2">
            <button type="button" id="history-prev-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm disabled:opacity-50" disabled>
                <i class="fas fa-chevron-left mr-1"></i>Previous
            </button>
            <button type="button" id="history-next-btn" class="btn bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm disabled:opacity-50" disabled>
                Next<i class="fas fa-chevron-right ml-1"></i>
            </button>
        </div>
    </div>
</div>