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>
}