<!-- templates/see_all.html -->
{% extends 'base.html' %}
{% block title %}For You - BlickBox{% endblock %}
{% block content %}
<div class="content-box">
    <div class="see-all-container">
        <h2>For You</h2>
        <div class="grid" id="items-grid"></div>
        <p class="error" id="error-message" style="display: none;"></p>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    async function fetchItems() {
        const token = localStorage.getItem('access_token');
        if (!token) throw new Error('Please log in to view content');
        const moviesResponse = await fetch('/api/movies/', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        const seriesResponse = await fetch('/api/series/', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        if (!moviesResponse.ok || !seriesResponse.ok) {
            throw new Error('Failed to fetch items');
        }
        const movies = await moviesResponse.json();
        const series = await seriesResponse.json();
        return [...movies, ...series];
    }

    document.addEventListener('DOMContentLoaded', async () => {
        const grid = document.getElementById('items-grid');
        const errorMessage = document.getElementById('error-message');

        try {
            const items = await fetchItems();
            grid.innerHTML = '';
            items.forEach(item => {
                const type = item.poster ? 'movie' : 'series';
                const image = item.poster || item.image;
                const card = document.createElement('div');
                card.className = 'card';
                card.innerHTML = `<img src="${image}" alt="${item.title}">`;
                card.addEventListener('click', () => {
                    window.location.href = `/${type}/${item.id}/?id=${item.id}`;
                });
                grid.appendChild(card);
            });
        } catch (err) {
            errorMessage.textContent = err.message;
            errorMessage.style.display = 'block';
        }
    });
</script>
{% endblock %}