mal/internal/templates/watchlist.templ

package templates

import (
	"fmt"
	"mal/internal/database"
)

templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentStatus string, sortBy string, sortOrder string) {
	@Layout("My Watchlist") {
		<div class="watchlist-header">
			<h2>watchlist</h2>
			<div class="watchlist-controls">
				<a href="/api/watchlist/export" class="text-link">export</a>
				<button class="text-link" onclick="document.getElementById('import-file').click()">import</button>
				<form id="import-form" hx-post="/api/watchlist/import" hx-encoding="multipart/form-data" style="display: none;">
					<input type="file" id="import-file" name="file" accept=".json" onchange="htmx.trigger('#import-form', 'submit')" />
				</form>
				<div class="view-toggle">
					<a href={ templ.URL(fmt.Sprintf("/watchlist?view=grid&status=%s&sort=%s&order=%s", currentStatus, sortBy, sortOrder)) } class={ viewClass(layout == "grid") }>grid</a>
					<a href={ templ.URL(fmt.Sprintf("/watchlist?view=table&status=%s&sort=%s&order=%s", currentStatus, sortBy, sortOrder)) } class={ viewClass(layout == "table") }>table</a>
				</div>
			</div>
		</div>

		<div class="status-tabs">
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=all&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "all") }>all</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=watching&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "watching") }>watching</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=continuing&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "continuing") }>continuing</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=on_hold&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "on_hold") }>on hold</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=plan_to_watch&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "plan_to_watch") }>plan to watch</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=dropped&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "dropped") }>dropped</a>
			<a href={ templ.URL(fmt.Sprintf("/watchlist?view=%s&status=completed&sort=%s&order=%s", layout, sortBy, sortOrder)) } class={ tabClass(currentStatus == "completed") }>completed</a>
		</div>

		@SortFilter(SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})

		if len(entries) == 0 {
			<div class="empty-state">
				<div class="empty-state-title">nothing here yet</div>
				<div class="empty-state-text">
					if currentStatus == "all" {
						your watchlist is empty. <a href="/">search for anime</a> to get started.
					} else if currentStatus == "continuing" {
						no airing anime with watching or plan to watch status.
					} else {
						no anime in this category.
					}
				</div>
			</div>
		} else {
			if layout == "grid" {
				<div class="catalog-grid">
					for _, entry := range entries {
						<div class="catalog-item watchlist-item" id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }>
							<a href={ templ.URL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
								if entry.ImageUrl != "" {
									<img src={ entry.ImageUrl } alt={ entry.DisplayTitle() } class="catalog-thumb" loading="lazy" />
								} else {
									<div class="no-image">no image</div>
								}
							</a>
							<div class="catalog-title">{ entry.DisplayTitle() }</div>
							<button 
								class="remove-btn"
								hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d?from=watchlist", entry.AnimeID))) } 
								hx-target={ fmt.Sprintf("#watchlist-entry-%d", entry.AnimeID) } 
								hx-swap="delete"
							>&times;</button>
						</div>
					}
				</div>
			} else {
				<table class="watchlist-table">
					<thead>
						<tr>
							<th></th>
							<th>title</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						for _, entry := range entries {
							<tr id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }>
								<td>
									<a href={ templ.SafeURL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
										<img src={ entry.ImageUrl } alt={ entry.DisplayTitle() } class="thumb" loading="lazy"/>
									</a>
								</td>
							<td class="title-cell">
								<a href={ templ.SafeURL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
									{ entry.DisplayTitle() }
								</a>
							</td>
							<td class="actions-cell">
									<button 
										class="remove-link"
										hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d?from=watchlist", entry.AnimeID))) } 
										hx-target={ fmt.Sprintf("#watchlist-entry-%d", entry.AnimeID) } 
										hx-swap="delete"
										style="background: none; border: none; cursor: pointer;"
									>remove</button>
								</td>
							</tr>
						}
					</tbody>
				</table>
			}
		}
	}
}

func viewClass(active bool) string {
	if active {
		return "active"
	}
	return ""
}

func tabClass(active bool) string {
	if active {
		return "active"
	}
	return ""
}