async function loadCart() {
    try {
        const response = await fetch('/api/cart', {
            headers: getAuthHeaders()
        });

        if (response.status === 401) {
            window.location.href = '/login.html';
            return;
        }

        const items = await response.json();
       
        if (items.length === 0) {
	    container.innerHTML = `
		<div class="col-12 text-center">
		    <p class="text-muted">Twój koszyk jest pusty</p>
		    <a href="/" class="btn btn-gothic">Przeglądaj książki</a>
		</div>
	    `;
	    return;
	}
 
        const container = document.getElementById('cart-items');
        container.innerHTML = items.map(item => `
	    <div class="col-md-6 col-lg-4">
		<div class="card dark-card h-100">
		    <img src="${item.obraz_url}" 
			 class="card-img-top" 
			 style="height: 200px; object-fit: cover;">
		    <div class="card-body">
			<h5 class="card-title">${item.tytul}</h5>
			<p class="card-text">Ilość: ${item.quantity}</p>
			<p class="text-danger">${item.cena.toString()} PLN</p>
		    </div>
		</div>
	    </div>
	`).join(''); 
    } catch (error) {
        console.error('Błąd:', error);
        showError('Wystąpił błąd podczas ładowania koszyka');
    }
}

document.addEventListener('DOMContentLoaded', async () => {
    try {
        const token = localStorage.getItem('token');
        if (!token) {
            window.location.href = '/login.html';
            return;
        }

        const response = await fetch('/api/cart', {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });

        if (!response.ok) throw new Error('Błąd ładowania koszyka');
        
        const cartItems = await response.json();
        const container = document.getElementById('cart-items');
        container.innerHTML = '';

        cartItems.forEach(item => {
            const itemHTML = `
                <div class="col-md-6">
                    <div class="card dark-card mb-3">
                        <div class="row g-0">
                            <div class="col-md-4">
                                <img src="${item.obraz_url}" class="img-fluid rounded-start" alt="${item.tytul}">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title">${item.tytul}</h5>
                                    <p class="card-text">Ilość: ${item.quantity}</p>
                                    <p class="card-text">Cena: ${item.cena} PLN</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', itemHTML);
        });

    } catch (error) {
        console.error('Error:', error);
        alert('Nie udało się załadować koszyka');
    }
});