Add your first movie or show to get started.
${isMovie ? 'Movie' : 'Show'}
${item.streaming_service ? `${escHtml(item.streaming_service)}` : ''}
${item.genre ? `${escHtml(item.genre)}` : ''}
${escHtml(item.title)}
${item.notes ? `
${escHtml(item.notes)}
` : ''}
${dateStr}
`;
// Events
card.querySelector('.btn-watch').addEventListener('click', () => toggleWatched(item.id));
card.querySelector('.btn-edit').addEventListener('click', () => openEdit(item));
card.querySelector('.btn-delete').addEventListener('click', () => openDeleteConfirm(item.id, item.title));
return card;
}
/* Toggle watched */
async function toggleWatched(id) {
try {
const data = await api({}, { action: 'toggle', id });
if (!data.success) throw new Error(data.error);
toast(data.item.watched ? '- Marked as watched' : 'Moved back to watchlist', 'success');
loadItems();
} catch (err) {
toast('Could not update item', 'error');
}
}
/* Add Modal */
function openAdd() {
editId.value = '';
addForm.reset();
selectedType = 'movie';
updateTypeToggle();
modalTitle.textContent = 'Add Title';
submitBtn.textContent = 'Add to Watchlist';
showModal(true);
setTimeout(() => inputTitle.focus(), 50);
}
function openEdit(item) {
editId.value = item.id;
inputTitle.value = item.title;
inputService.value = item.streaming_service || '';
inputGenre.value = item.genre || '';
inputNotes.value = item.notes || '';
selectedType = item.type || 'movie';
updateTypeToggle();
modalTitle.textContent = 'Edit Title';
submitBtn.textContent = 'Save Changes';
showModal(true);
setTimeout(() => inputTitle.focus(), 50);
}
function showModal(on) {
modalOverlay.classList.toggle('hidden', !on);
document.body.style.overflow = on ? 'hidden' : '';
}
/* Type toggle inside form */
function updateTypeToggle() {
document.querySelectorAll('.type-option').forEach(btn => {
btn.classList.toggle('active', btn.dataset.typeVal === selectedType);
});
}
document.querySelectorAll('.type-option').forEach(btn => {
btn.addEventListener('click', () => {
selectedType = btn.dataset.typeVal;
updateTypeToggle();
});
});
/* Form submit */
addForm.addEventListener('submit', async (e) => {
e.preventDefault();
const title = inputTitle.value.trim();
if (!title) {
inputTitle.focus();
inputTitle.style.borderColor = 'var(--danger)';
setTimeout(() => inputTitle.style.borderColor = '', 1200);
return;
}
submitBtn.disabled = true;
submitBtn.textContent = editId.value ? 'Saving' : 'Adding';
try {
const payload = {
action: editId.value ? 'edit' : 'add',
id: editId.value ? parseInt(editId.value) : undefined,
title,
type: selectedType,
streaming_service: inputService.value.trim(),
genre: inputGenre.value.trim(),
notes: inputNotes.value.trim(),
};
const data = await api({}, payload);
if (!data.success) throw new Error(data.error);
toast(editId.value ? '- Changes saved' : '- Added to watchlist', 'success');
showModal(false);
loadItems();
} catch (err) {
toast(err.message || 'Something went wrong', 'error');
} finally {
submitBtn.disabled = false;
submitBtn.textContent = editId.value ? 'Save Changes' : 'Add to Watchlist';
}
});
/* Delete */
let pendingDeleteId = null;
function openDeleteConfirm(id, title) {
pendingDeleteId = id;
deleteTitle.textContent = title;
deleteOverlay.classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function closeDelete() {
pendingDeleteId = null;
deleteOverlay.classList.add('hidden');
document.body.style.overflow = '';
}
confirmDelete.addEventListener('click', async () => {
if (!pendingDeleteId) return;
confirmDelete.disabled = true;
try {
const data = await api({}, { action: 'delete', id: pendingDeleteId });
if (!data.success) throw new Error(data.error);
toast('Removed from watchlist', 'success');
closeDelete();
loadItems();
} catch (err) {
toast('Could not remove item', 'error');
} finally {
confirmDelete.disabled = false;
}
});
/* Filter pills */
filterGroup.addEventListener('click', (e) => {
const btn = e.target.closest('.pill');
if (!btn) return;
filterGroup.querySelectorAll('.pill').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.filter = btn.dataset.filter;
loadItems();
});
typeGroup.addEventListener('click', (e) => {
const btn = e.target.closest('.type-pill');
if (!btn) return;
typeGroup.querySelectorAll('.type-pill').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.type = btn.dataset.type;
loadItems();
});
/* Search (debounced) */
let searchTimer;
searchInput.addEventListener('input', () => {
clearTimeout(searchTimer);
searchTimer = setTimeout(() => {
state.search = searchInput.value.trim();
loadItems();
}, 320);
});
/* Modal close handlers */
openAddModal.addEventListener('click', openAdd);
closeModal.addEventListener('click', () => showModal(false));
cancelModal.addEventListener('click', () => showModal(false));
closeDeleteModal.addEventListener('click', closeDelete);
cancelDelete.addEventListener('click', closeDelete);
// Close on overlay click
modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) showModal(false); });
deleteOverlay.addEventListener('click', (e) => { if (e.target === deleteOverlay) closeDelete(); });
// Keyboard
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
if (!modalOverlay.classList.contains('hidden')) showModal(false);
if (!deleteOverlay.classList.contains('hidden')) closeDelete();
}
});
/* Toast */
function toast(msg, type = 'default') {
const el = document.createElement('div');
el.className = 'toast' + (type === 'success' ? ' toast-success' : type === 'error' ? ' toast-error' : '');
const icon = type === 'success' ? '-' : type === 'error' ? '' : '';
el.innerHTML = `