{% extends "base.html" %}

{% block title %}Timer - {{ app_name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h2 mb-1">
                        <i class="fas fa-clock text-primary me-2"></i>Timer
                    </h1>
                    <p class="text-muted mb-0">Track your time with precision</p>
                </div>
                <div>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#startTimerModal">
                        <i class="fas fa-play me-2"></i>Start Timer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Timer Section -->
    <div class="row mb-4" id="activeTimerSection" style="display: none;">
        <div class="col-12">
            <div class="card border-success">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-play-circle me-2"></i>Active Timer
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                        <i class="fas fa-play text-success fa-2x"></i>
                                    </div>
                                </div>
                                <div>
                                    <h5 id="activeProjectName" class="text-success mb-1"></h5>
                                    <p id="activeTimerNotes" class="text-muted mb-0"></p>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="fas fa-clock text-muted me-2"></i>
                                <small class="text-muted">
                                    Started: <span id="activeTimerStart" class="fw-semibold"></span>
                                </small>
                            </div>
                        </div>
                        <div class="col-md-3 text-center">
                            <div class="timer-display mb-2" id="activeTimerDisplay">00:00:00</div>
                            <small class="text-muted fw-semibold">Duration</small>
                        </div>
                        <div class="col-md-3 text-center text-md-end">
                            <button type="button" class="btn btn-danger px-4" id="stopTimerBtn">
                                <i class="fas fa-stop me-2"></i>Stop Timer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- No Active Timer -->
    <div class="row mb-4" id="noActiveTimerSection">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <div class="mb-4">
                        <i class="fas fa-clock fa-3x text-muted opacity-50"></i>
                    </div>
                    <h3 class="text-muted mb-3">No Active Timer</h3>
                    <p class="text-muted mb-4">Start a timer to begin tracking your time effectively.</p>
                    <button type="button" class="btn btn-primary px-4" data-bs-toggle="modal" data-bs-target="#startTimerModal">
                        <i class="fas fa-play me-2"></i>Start Timer
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Entries -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2 text-primary"></i>Recent Time Entries
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div id="recentEntriesList">
                        <!-- Entries will be loaded here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Start Timer Modal -->
<div class="modal fade" id="startTimerModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-play me-2 text-success"></i>Start Timer
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="startTimerForm">
                <div class="modal-body">
                    <div class="mb-4">
                        <label for="projectSelect" class="form-label fw-semibold">
                            <i class="fas fa-project-diagram me-1"></i>Project *
                        </label>
                        <select class="form-select form-select-lg" id="projectSelect" name="project_id" required>
                            <option value="">Select a project...</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="timerNotes" class="form-label fw-semibold">
                            <i class="fas fa-sticky-note me-1"></i>Notes
                        </label>
                        <textarea class="form-control" id="timerNotes" name="notes" rows="3" 
                                  placeholder="What are you working on?"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="timerTags" class="form-label fw-semibold">
                            <i class="fas fa-tags me-1"></i>Tags
                        </label>
                        <input type="text" class="form-control" id="timerTags" name="tags" 
                               placeholder="tag1, tag2, tag3">
                        <div class="form-text">Separate tags with commas</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-play me-2"></i>Start Timer
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Timer Modal -->
<div class="modal fade" id="editTimerModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2 text-primary"></i>Edit Time Entry
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editTimerForm" novalidate>
                <div class="modal-body">
                    <input type="hidden" id="editEntryId" name="entry_id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="editProjectSelect" class="form-label fw-semibold">
                                    <i class="fas fa-project-diagram me-1"></i>Project *
                                </label>
                                <select class="form-select" id="editProjectSelect" name="project_id" required>
                                    <option value="">Select a project...</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="fas fa-clock me-1"></i>Duration
                                </label>
                                <div class="form-control-plaintext" id="editDurationDisplay">--:--:--</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="editStartTime" class="form-label fw-semibold">
                                    <i class="fas fa-play me-1"></i>Start Time *
                                </label>
                                <input type="datetime-local" class="form-control" id="editStartTime" name="start_time" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="editEndTime" class="form-label fw-semibold">
                                    <i class="fas fa-stop me-1"></i>End Time *
                                </label>
                                <input type="datetime-local" class="form-control" id="editEndTime" name="end_time" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="editNotes" class="form-label fw-semibold">
                            <i class="fas fa-sticky-note me-1"></i>Notes
                        </label>
                        <textarea class="form-control" id="editNotes" name="notes" rows="3"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-4">
                                <label for="editTags" class="form-label fw-semibold">
                                    <i class="fas fa-tags me-1"></i>Tags
                                </label>
                                <input type="text" class="form-control" id="editTags" name="tags" 
                                       placeholder="tag1, tag2, tag3">
                                <div class="form-text">Separate tags with commas</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-4">
                                <div class="form-check form-switch mt-4">
                                    <input class="form-check-input" type="checkbox" id="editBillable" name="billable">
                                    <label class="form-check-label fw-semibold" for="editBillable">
                                        <i class="fas fa-dollar-sign me-1"></i>Billable
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger me-auto" id="deleteTimerBtn">
                        <i class="fas fa-trash me-1"></i>Delete
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary" id="editSaveBtn">
                        <i class="fas fa-save me-2"></i>Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Entry Confirmation Modal -->
<div class="modal fade" id="deleteEntryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-trash me-2 text-danger"></i>Delete Time Entry
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Warning:</strong> This action cannot be undone.
                </div>
                <p>Are you sure you want to delete this time entry?</p>
                <p class="text-muted mb-0">This will permanently remove the entry and cannot be recovered.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-2"></i>Delete Entry
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let activeTimer = null;
let timerInterval = null;

// Load projects for dropdowns
function loadProjects() {
    const promise = fetch('/api/projects', { credentials: 'same-origin' })
        .then(response => response.json())
        .then(data => {
            const projectSelect = document.getElementById('projectSelect');
            const editProjectSelect = document.getElementById('editProjectSelect');
            
            if (!projectSelect || !editProjectSelect) return;
            
            // Clear existing options
            projectSelect.innerHTML = '<option value="">Select a project...</option>';
            editProjectSelect.innerHTML = '<option value="">Select a project...</option>';
            
            data.projects.forEach(project => {
                if (project.status === 'active') {
                    const option = new Option(project.name, project.id);
                    projectSelect.add(option);
                    
                    const editOption = new Option(project.name, project.id);
                    editProjectSelect.add(editOption);
                }
            });
            return data.projects;
        })
        .catch(error => {
            console.error('Error loading projects:', error);
            showToast('Error loading projects', 'error');
        });
    window.projectsLoadedPromise = promise;
    return promise;
}

// Check timer status
function checkTimerStatus() {
    fetch('/api/timer/status', { credentials: 'same-origin' })
        .then(response => response.json())
        .then(data => {
            if (data.active && data.timer) {
                activeTimer = data.timer;
                showActiveTimer();
                startTimerDisplay();
            } else {
                hideActiveTimer();
            }
        })
        .catch(error => {
            console.error('Error checking timer status:', error);
        });
}

// Show active timer
function showActiveTimer() {
    document.getElementById('noActiveTimerSection').style.display = 'none';
    document.getElementById('activeTimerSection').style.display = 'block';
    
    document.getElementById('activeProjectName').textContent = activeTimer.project_name;
    document.getElementById('activeTimerNotes').textContent = activeTimer.notes || 'No notes';
    document.getElementById('activeTimerStart').textContent = new Date(activeTimer.start_time).toLocaleString();
}

// Hide active timer
function hideActiveTimer() {
    document.getElementById('noActiveTimerSection').style.display = 'block';
    document.getElementById('activeTimerSection').style.display = 'none';
    activeTimer = null;
    
    if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
}

// Start timer display
function startTimerDisplay() {
    if (timerInterval) {
        clearInterval(timerInterval);
    }
    
    timerInterval = setInterval(() => {
        if (activeTimer) {
            const now = new Date();
            const start = new Date(activeTimer.start_time);
            const duration = Math.floor((now - start) / 1000);
            
            const hours = Math.floor(duration / 3600);
            const minutes = Math.floor((duration % 3600) / 60);
            const seconds = duration % 60;
            
            document.getElementById('activeTimerDisplay').textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
    }, 1000);
}

// Load recent entries
function loadRecentEntries() {
    fetch('/api/entries?limit=10', { credentials: 'same-origin' })
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('recentEntriesList');
            
            if (data.entries.length === 0) {
                container.innerHTML = `
                    <div class="text-center py-5">
                        <div class="mb-4">
                            <i class="fas fa-clock fa-4x text-muted opacity-50"></i>
                        </div>
                        <h5 class="text-muted mb-3">No time entries yet</h5>
                        <p class="text-muted mb-4">Start tracking your time to see entries here</p>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#startTimerModal">
                            <i class="fas fa-play me-2"></i>Start Your First Timer
                        </button>
                    </div>
                `;
                return;
            }
            
            container.innerHTML = data.entries.map(entry => `
                <div class="d-flex justify-content-between align-items-center py-3 px-4 border-bottom">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                <i class="fas fa-project-diagram text-primary"></i>
                            </div>
                        </div>
                        <div>
                            <strong class="d-block">${entry.project_name}</strong>
                            ${entry.notes ? `<small class="text-muted d-block">${entry.notes}</small>` : ''}
                            <small class="text-muted">
                                <i class="fas fa-calendar me-1"></i>
                                ${new Date(entry.start_time).toLocaleDateString()} 
                                <i class="fas fa-clock ms-2 me-1"></i>
                                ${new Date(entry.start_time).toLocaleTimeString()} - 
                                ${entry.end_time ? new Date(entry.end_time).toLocaleTimeString() : 'Running'}
                            </small>
                        </div>
                    </div>
                    <div class="text-end">
                        <div class="badge bg-primary fs-6 mb-2">${entry.duration_formatted}</div>
                        <br>
                        <div class="btn-group" role="group">
                            <button class="btn btn-sm btn-outline-primary" onclick="editEntry(${entry.id})" title="Edit entry">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteEntry(${entry.id})" title="Delete entry">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        })
        .catch(error => {
            console.error('Error loading recent entries:', error);
        });
}

// Start timer
document.getElementById('startTimerForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {
        project_id: formData.get('project_id'),
        notes: formData.get('notes'),
        tags: formData.get('tags')
    };
    
    // Show loading state
    const submitBtn = this.querySelector('button[type="submit"]');
    submitBtn.innerHTML = '<div class="loading-spinner me-2"></div>Starting...';
    submitBtn.disabled = true;
    
    fetch('/api/timer/start', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        credentials: 'same-origin',
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Timer started successfully', 'success');
            bootstrap.Modal.getInstance(document.getElementById('startTimerModal')).hide();
            this.reset();
            checkTimerStatus();
            loadRecentEntries();
        } else {
            showToast(data.message || 'Error starting timer', 'error');
        }
    })
    .catch(error => {
        console.error('Error starting timer:', error);
        showToast('Error starting timer', 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = '<i class="fas fa-play me-2"></i>Start Timer';
        submitBtn.disabled = false;
    });
});

// Stop timer
document.getElementById('stopTimerBtn').addEventListener('click', function() {
    this.innerHTML = '<div class="loading-spinner me-2"></div>Stopping...';
    this.disabled = true;
    
    fetch('/api/timer/stop', {
        method: 'POST',
        credentials: 'same-origin'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Timer stopped successfully', 'success');
            hideActiveTimer();
            loadRecentEntries();
        } else {
            showToast(data.message || 'Error stopping timer', 'error');
        }
    })
    .catch(error => {
        console.error('Error stopping timer:', error);
        showToast('Error stopping timer', 'error');
    })
    .finally(() => {
        this.innerHTML = '<i class="fas fa-stop me-2"></i>Stop Timer';
        this.disabled = false;
    });
});

// Edit entry
function editEntry(entryId) {
    const ensureProjects = window.projectsLoadedPromise || loadProjects();
    Promise.resolve(ensureProjects).then(() => {
        return fetch(`/api/entry/${entryId}`, { credentials: 'same-origin' })
            .then(response => response.json());
    })
    .then(data => {
        document.getElementById('editEntryId').value = entryId;
        const editProjectSelect = document.getElementById('editProjectSelect');
        // Ensure the project option exists; if not, append it
        if (!Array.from(editProjectSelect.options).some(o => o.value == data.project_id)) {
            const opt = new Option(data.project_name || `Project ${data.project_id}`, data.project_id);
            editProjectSelect.add(opt);
        }
        editProjectSelect.value = data.project_id;
            // Convert ISO to local datetime-local value
            const startIso = data.start_time;
            const endIso = data.end_time;
            const toLocalInput = (iso) => {
                if (!iso) return '';
                const d = new Date(iso);
                const pad = (n) => n.toString().padStart(2, '0');
                return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
            };
            document.getElementById('editStartTime').value = toLocalInput(startIso);
            document.getElementById('editEndTime').value = toLocalInput(endIso);
            document.getElementById('editNotes').value = data.notes || '';
            document.getElementById('editTags').value = data.tags || '';
            document.getElementById('editBillable').checked = data.billable;
            
            // Calculate and display duration
            updateEditDurationDisplay();
            
            new bootstrap.Modal(document.getElementById('editTimerModal')).show();
    })
    .catch(error => {
            console.error('Error loading entry:', error);
            showToast('Error loading entry', 'error');
    });
}

// Debug: signal that edit form handler is attached
console.debug('Edit form submit handler attached');

function performEditSave() {
    const form = document.getElementById('editTimerForm');
    if (!form) return;
    const entryId = document.getElementById('editEntryId').value;
    const formData = new FormData(form);
    const data = {
        project_id: formData.get('project_id'),
        start_time: formData.get('start_time'),
        end_time: formData.get('end_time'),
        notes: formData.get('notes'),
        tags: formData.get('tags'),
        billable: formData.get('billable') === 'on'
    };
    console.debug('Submitting data', data);

    // Validate
    const startVal = data.start_time ? new Date(data.start_time) : null;
    const endVal = data.end_time ? new Date(data.end_time) : null;
    if (startVal && endVal && endVal <= startVal) {
        showToast('End time must be after start time', 'error');
        return;
    }

    const submitBtn = form.querySelector('button[type="submit"]');
    if (submitBtn) {
        submitBtn.innerHTML = '<div class="loading-spinner me-2"></div>Saving...';
        submitBtn.disabled = true;
    }

    fetch(`/api/entry/${entryId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(payload => {
        console.debug('PUT response', payload);
        if (payload.success) {
            showToast('Entry updated successfully', 'success');
            const modal = bootstrap.Modal.getInstance(document.getElementById('editTimerModal'));
            if (modal) modal.hide();
            loadRecentEntries();
        } else {
            showToast(payload.message || 'Error updating entry', 'error');
        }
    })
    .catch(err => {
        console.error('Error updating entry:', err);
        showToast('Error updating entry', 'error');
    })
    .finally(() => {
        if (submitBtn) {
            submitBtn.innerHTML = '<i class="fas fa-save me-2"></i>Save Changes';
            submitBtn.disabled = false;
        }
    });
}

// Edit timer form
document.getElementById('editTimerForm').addEventListener('submit', function(e) {
    e.preventDefault();
    console.debug('Edit form submit event fired');
    performEditSave();
});

// Ensure click on Save triggers submit handler even if native validation blocks it
document.addEventListener('click', function(e) {
    const btn = e.target.closest('#editSaveBtn');
    if (!btn) return;
    e.preventDefault();
    performEditSave();
});

// Live update duration when times change in edit modal
function updateEditDurationDisplay() {
    const start = document.getElementById('editStartTime').value;
    const end = document.getElementById('editEndTime').value;
    const display = document.getElementById('editDurationDisplay');
    if (!start || !end) {
        display.textContent = '--:--:--';
        return;
    }
    const startDate = new Date(start);
    const endDate = new Date(end);
    const diff = Math.max(0, Math.floor((endDate - startDate) / 1000));
    const h = Math.floor(diff / 3600);
    const m = Math.floor((diff % 3600) / 60);
    const s = diff % 60;
    display.textContent = `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
}
document.getElementById('editStartTime').addEventListener('change', updateEditDurationDisplay);
document.getElementById('editEndTime').addEventListener('change', updateEditDurationDisplay);

// Delete timer
document.getElementById('deleteTimerBtn').addEventListener('click', function() {
    const entryId = document.getElementById('editEntryId').value;
    
    // Store the entry ID and button reference for the modal
    window.pendingDeleteEntryId = entryId;
    window.pendingDeleteButton = this;
    
    // Show the delete confirmation modal
    new bootstrap.Modal(document.getElementById('deleteEntryModal')).show();
});

// Delete entry directly
function deleteEntry(entryId) {
    // Store the entry ID for the modal
    window.pendingDeleteEntryId = entryId;
    window.pendingDeleteButton = null;
    
    // Show the delete confirmation modal
    new bootstrap.Modal(document.getElementById('deleteEntryModal')).show();
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    window.projectsLoadedPromise = loadProjects();
    checkTimerStatus();
    loadRecentEntries();
    
    // Refresh data periodically
    setInterval(() => {
        loadRecentEntries();
    }, 30000); // Every 30 seconds
    
    // Handle delete confirmation modal
    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        const entryId = window.pendingDeleteEntryId;
        const button = window.pendingDeleteButton;
        
        if (!entryId) return;
        
        // Show loading state if button exists
        if (button) {
            button.innerHTML = '<div class="loading-spinner me-2"></div>Deleting...';
            button.disabled = true;
        }
        
        fetch(`/api/entry/${entryId}`, {
            method: 'DELETE',
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Entry deleted successfully', 'success');
                
                // Hide modals
                bootstrap.Modal.getInstance(document.getElementById('deleteEntryModal')).hide();
                if (button) {
                    bootstrap.Modal.getInstance(document.getElementById('editTimerModal')).hide();
                }
                
                // Refresh data
                loadRecentEntries();
                if (button) {
                    checkTimerStatus();
                }
            } else {
                showToast(data.message || 'Error deleting entry', 'error');
            }
        })
        .catch(error => {
            console.error('Error deleting entry:', error);
            showToast('Error deleting entry', 'error');
        })
        .finally(() => {
            // Reset button state if it exists
            if (button) {
                button.innerHTML = '<i class="fas fa-trash me-1"></i>Delete';
                button.disabled = false;
            }
            
            // Clear stored data
            window.pendingDeleteEntryId = null;
            window.pendingDeleteButton = null;
        });
    });
});
</script>
{% endblock %}