@{
    ViewData["Title"] = "Filmsök";
}
<div class="container mt-4">
    <h2>🎬 Filmsök</h2>
    <input type="text" class="form-control mb-3" id="searchInput" placeholder="Sök efter en film..." oninput="searchMovie()" />

    <div class="results row" id="results"></div>
</div>

@section Scripts {
    <script>
        const API_KEY = 'aef2f49296b77b9b9c269678d04bdbc6';
        const BASE_URL = 'https://api.themoviedb.org/3';
        const IMG_BASE = 'https://image.tmdb.org/t/p/w300';

        async function searchMovie() {
            const query = document.getElementById('searchInput').value.trim();
            const resultContainer = document.getElementById('results');
            resultContainer.innerHTML = '';

            if (query.length < 2) return;

            const res = await fetch(`${BASE_URL}/search/movie?api_key=${API_KEY}&language=sv-SE&query=${encodeURIComponent(query)}`);
            const data = await res.json();

            data.results.forEach(movie => {
                const col = document.createElement('div');
                col.className = 'col-md-3 mb-4';
                col.innerHTML = `
                    <div class="card h-100 bg-dark text-white border-0 shadow">
                        <img src="${movie.poster_path ? IMG_BASE + movie.poster_path : 'https://via.placeholder.com/300x450?text=Ingen+bild'}" class="card-img-top" alt="${movie.title}" />
                        <div class="card-body">
                            <h5 class="card-title">${movie.title}</h5>
                            <p class="card-text"><small>${movie.release_date || 'Okänt datum'}</small></p>
                        </div>
                    </div>
                `;
                resultContainer.appendChild(col);
            });
        }
    </script>
}
