@page "/"

<PageTitle>Home</PageTitle>

<form class="mb-3" @onsubmit="OnSearch">
    <input type="text" class="form-control" placeholder="Search for movies..."
        style="width: 40%; margin-bottom: 10px;"
        @bind="searchTitle" @bind:event="oninput" />
    <div class="d-flex align-items-center gap-2">
        <button class="btn btn-primary" type="submit">Search</button>
        <p class="mb-0">@((movies == null) ? "" : movies.TotalResults + " results found")</p>
    </div>
</form>

<table class="table table-striped" id="moviesTable">
    <thead class="table-primary">
        <tr>
            <th></th>
            <th style="width: 100%;">Title</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        @if (movies?.Search != null)
        {
            @foreach (var movie in movies.Search)
            {
                <tr>
                    <td><button class="btn btn-secondary" @onclick="() => OnMovieSelected(movie.IdIMDB)">Details</button></td>
                    <td>@movie.Title</td>
                    <td>@movie.Year</td>
                </tr>
            }
        }
    </tbody>
</table>
    

@inject OmdbService OmdbService
@inject NavigationManager NavigationManager

@code {
    private string searchTitle = "";
    private MovieSearch? movies = null;

    private async Task OnMovieSelected(string imdbID)
    {
        NavigationManager.NavigateTo($"/movie/{imdbID}");
    }

    private async Task OnSearch()
    {
        movies = await OmdbService.FetchMovies(searchTitle);
    }
}