<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dua's Book Club</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; color: #1c1e21; margin: 0; }
        .container { max-width: 1200px; margin: 30px auto; padding: 20px; }
        h1 { color: #1877f2; text-align: center; font-size: 2.5em; }
        .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
        .book-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; text-align: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
        .book-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
        .book-card img { width: 100%; height: 400px; object-fit: cover; }
        .book-details { padding: 15px; }
        .book-details h2 { font-size: 1.2em; margin: 0 0 15px 0; min-height: 44px; }
        .checkbox-group { display: flex; justify-content: space-around; align-items: center; }
        .checkbox-group label { font-size: 1em; cursor: pointer; display: flex; align-items: center; }
        .checkbox-group input { margin-right: 8px; width: 18px; height: 18px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Dua's Book Club</h1>
        <div class="book-grid">
            {{range .books}}
            <div class="book-card">
                <img src="./{{.ImagePath}}" alt="Cover of {{.Name}}">
                <div class="book-details">
                    <h2>{{.Name}}</h2>
                    <div class="checkbox-group">
                        <label>
                            <input type="checkbox" class="read-checkbox" data-book-id="{{.ID}}" data-person="Tuomas" {{if .TuomasRead}}checked{{end}}>
                            Tuomas
                        </label>
                        <label>
                            <input type="checkbox" class="read-checkbox" data-book-id="{{.ID}}" data-person="Jenni" {{if .JenniRead}}checked{{end}}>
                            Jenni
                        </label>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
    </div>

<script>
    // This script sends an update to the server whenever a checkbox is clicked.
    document.addEventListener('DOMContentLoaded', () => {
        const checkboxes = document.querySelectorAll('.read-checkbox');

        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const bookId = this.dataset.bookId;
                const person = this.dataset.person;
                const isRead = this.checked;

                // Log the data being sent
                console.log(`Updating Book ID: ${bookId}, Person: ${person}, Read: ${isRead}`);

                // Send the data to the backend API endpoint
                fetch(`./books/${bookId}/update`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        person: person,
                        read: isRead,
                    }),
                })
                .then(response => {
                    if (!response.ok) {
                        // If the server response is not OK, throw an error to be caught below
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Update successful:', data);
                })
                .catch(error => {
                    console.error('Error updating status:', error);
                    // Revert the checkbox state on failure to reflect the actual server state
                    this.checked = !isRead; 
                });
            });
        });
    });
</script>

</body>
</html>

