{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ link.alias }}</title>
    <link href="{% static 'css/dist/styles.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/markdown.css' %}">
    <style>
        /* Task List Styles */
        .task-item {
            list-style: none;
            padding-left: 0;
        }

        .task-checkbox {
            margin-right: 0.5rem;
            cursor: pointer;
            width: 1.1em;
            height: 1.1em;
            vertical-align: middle;
        }

        .task-checkbox:hover {
            opacity: 0.7;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="max-w-6xl mx-auto mt-10 p-4 sm:px-6 bg-white shadow-md rounded-lg">
        <div class="prose">
            {{ rendered_text|safe }}
        </div>
    </div>

    <script>
        // Task checkbox functionality
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.task-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', async function(e) {
                    const taskHash = this.getAttribute('data-hash');
                    const linkId = {{ link.id }};

                    try {
                        const response = await fetch(`/link/${linkId}/toggle_task/`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({ task_hash: taskHash })
                        });

                        const data = await response.json();

                        if (!response.ok) {
                            this.checked = !this.checked;
                            console.error('Failed to update task state:', data);
                        }
                    } catch (error) {
                        this.checked = !this.checked;
                        console.error('Error updating task:', error);
                    }
                });
            });
        });
    </script>
</body>
</html>
