@page "/movie/{id}"

<PageTitle>Movie Details</PageTitle>

<div style="display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; gap: 20px; max-width: 800px; margin-right: auto;">
    @if (movie is not null)
    {
        <h1>@movie.Title</h1>
        <div></div>
        <img src="@movie.Poster" alt="@movie.Title Poster" />
        <div class="details">
            <p>@movie.Runtime</p>
            <p>@movie.Plot</p>
            <button>Favorite</button>
        </div>
    }
    else
    {
        <p>Loading movie details...</p>
    }
</div>


@inject OmdbService OmdbService

@code {
    [Parameter]
    public required string id { get; set; }
    private Movie? movie;

    protected override async Task OnInitializedAsync()
    {
        movie = await OmdbService.FetchMovieDetail(id);
    }
}