{% extends "base.html" %}

{% block title %}Items - API Demo{% endblock %}

{% block content %}
<div class="page-header">
    <h1>📦 Items Catalog</h1>
    <p>Browse all available products</p>
</div>

<div id="items-container" class="items-grid">
    <div class="loading">Loading items...</div>
</div>
{% endblock %}

{% block scripts %}
<script>
const API_BASE = '/api';

async function loadItems() {
    try {
        const response = await fetch(`${API_BASE}/items`);
        const items = await response.json();

        const container = document.getElementById('items-container');
        container.innerHTML = items.map(item => `
            <div class="item-card ${!item.in_stock ? 'out-of-stock' : ''}">
                <div class="item-header">
                    <h3>${item.name}</h3>
                    <span class="badge ${item.in_stock ? 'badge-success' : 'badge-danger'}">
                        ${item.in_stock ? 'In Stock' : 'Out of Stock'}
                    </span>
                </div>
                <p class="item-description">${item.description || 'No description'}</p>
                <div class="item-footer">
                    <span class="price">$${item.price.toFixed(2)}</span>
                    <button class="btn btn-sm" onclick="viewItem(${item.id})">View Details</button>
                </div>
            </div>
        `).join('');
    } catch (error) {
        console.error('Error loading items:', error);
        document.getElementById('items-container').innerHTML =
            '<div class="error">Failed to load items. Please try again.</div>';
    }
}

function viewItem(id) {
    alert(`View item details for ID: ${id}\n\nAPI Endpoint: /api/items/${id}`);
}

// Load items on page load
loadItems();
</script>
{% endblock %}