Home finished

Components/Pages/Home.razor

@@ -2,6 +2,54 @@
 
 <PageTitle>Home</PageTitle>
 
-<h1>Hello, world!</h1>
+<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>
 
-Welcome to your new app.
+<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);
+    }
+}