+ baseline to the git

cmd/web/watchlist.templ

@@ -0,0 +1,52 @@
+package web
+
+import "git.itsigo.dev/istigo/pocketmovie/internal/database"
+import "fmt"
+import "strings"
+
+templ WatchList(movies []database.Movie) {
+	@Base("Watchlist - PocketMovie") {
+		@addMovieButton()
+		<button
+			data-on-click="@post('/db/updateStreamingServices')"
+			data-tooltip="Refresh streaming services"
+			type="button"
+		>
+			@refresh()
+		</button>
+		@List(movies)
+	}
+}
+
+templ List(movies []database.Movie) {
+	<table id="movie-list" class="striped">
+		<tr>
+			<th>Titel</th>
+			<th>Year</th>
+			<th>Genre</th>
+			<th>Owned</th>
+			<th>Streaming service</th>
+		</tr>
+		for _, item := range movies {
+			<tr>
+				<td><a href={ fmt.Sprintf("/movie/%d", item.ID) }>{ item.Title }</a></td>
+				<td>{ strings.Split(item.Year, "-")[0] }</td>
+				<td>{ item.Genre }</td>
+				{{ ownedClasses := "bg-red" }}
+				if item.Owned == 1 {
+					{{ ownedClasses = "bg-green" }}
+				}
+				<td
+					class={ ownedClasses }
+				>
+					{ item.Owned != 0 }
+				</td>
+				<td>{ item.StreamingServices }</td>
+			</tr>
+		}
+	</table>
+}
+
+templ refresh() {
+	<svg width="1em" height="1em" viewBox="0 0 24 24" stroke="var(--pico-primary-inverse)" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M12 21C16.9706 21 21 16.9706 21 12C21 9.69494 20.1334 7.59227 18.7083 6L16 3M12 3C7.02944 3 3 7.02944 3 12C3 14.3051 3.86656 16.4077 5.29168 18L8 21M21 3H16M16 3V8M3 21H8M8 21V16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+}