Potion/internal/templates/pages/profile.templ

package templates

import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "fmt"
import "strings"
import domain "github.com/haydenhargreaves/Potion/internal/domain/server"
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
import domainUser "github.com/haydenhargreaves/Potion/internal/domain/user"

func displayDifficulty(diff int) string {
	switch diff {
	case 1:
		return "Beginner"
	case 2:
		return "Easy"
	case 3:
		return "Intermediate"
	case 4:
		return "Challenging"
	case 5:
		return "Extreme"
	default:
		return ""
	}
}

func displayTags(tags []domainRecipe.Tag) string {
	names := make([]string, 0, len(tags))
	for _, tag := range tags {
		names = append(names, tag.Name)
	}
	return strings.Join(names, ", ")
}

templ userDetailsSection(user domainUser.User, recipeCount int) {
	<section class="w-full flex flex-col justify-center my-8 py-4 border-b border-gray-300">
		<div class="w-full p-4 md:p-8 flex items-center gap-x-8">
    if user.ImageUrl != "" {
			<img
				class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
				src={ user.ImageUrl }
			/>
    } else {
			<img
				class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none"
				src={ fmt.Sprintf("https://ui-avatars.com/api/?name=%s+%s&size=150", strings.Split(user.Name, " ")[0], strings.Split(user.Name, " ")[1])}
			/>

    }
			<div class="flex flex-col gap-y-4">
				<div class="">
					<h1 class="text-md md:text-2xl font-semibold">{ user.Name }</h1>
					<p class="text-xs md:text-sm">{ user.Email }</p>
				</div>
				<div class="flex gap-x-4">
					<p class="text-xs md:text-sm"><span class="font-bold">{ recipeCount }</span> recipes</p>
					<p class="text-xs md:text-sm"><span class="font-bold">0</span> favorites</p>
				</div>
			</div>
		</div>
	</section>
}

templ recipesSection(recipes []domainRecipe.Recipe) {
	<section class="p-8">
		<h2 class="text-2xl font-semibold text-gray-800">My Recipes</h2>
		<ul class="w-full my-2">
			if len(recipes) <= 4 {
				for _, recipe :=range recipes {
					@recipeListItem(recipe)
				}
			} else {
				for _, recipe := range recipes[:4] {
					@recipeListItem(recipe)
				}
			}
			<a href="/" class="bg-red-500">
				<li
					class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center"
				>
					See all...
				</li>
			</a>
		</ul>
	</section>
}

templ favoritesSection(recipes []domainRecipe.Recipe) {
	<section class="p-8">
		<h2 class="text-2xl font-semibold text-gray-800">My Favorites</h2>
		<p class="text-sm my-2">Favorites section is under construction!</p>
	</section>
}

templ activitySection() {
	<section class="p-8">
		<h2 class="text-2xl font-semibold text-gray-800">Recent Activity</h2>
		<p class="text-sm my-2">Activity section is under construction!</p>
		<!--
		<ul class="w-full my-2">
			@activityListItem()
			@activityListItem()
			@activityListItem()
			@activityListItem()
			@activityListItem()
			@activityListItem()
			<a href="/" class="bg-red-500">
				<li
					class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center"
				>
					See all...
				</li>
			</a>
		</ul>
    -->
	</section>
}

templ recipeListItem(recipe domainRecipe.Recipe) {
	<li class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150">
		<p class="text-base md:text-lg">
			<a href={ templ.SafeURL(fmt.Sprintf(domain.WEB_RECIPE, recipe.Id)) } class="hover:text-blue-600 duration-100">
				{ recipe.Title }
			</a>
		</p>
		<p class="hidden md:block text-sm text-gray-700 my-1.5">
			Difficulty: <span class="font-semibold">{ displayDifficulty(recipe.Difficulty) }</span>
			| Duration: <span class="font-semibold">{ recipe.Duration.Total } min</span>
			| Category: <span class="font-semibold">{ recipe.Category }</span>
		</p>
		<p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
			Difficulty: <span class="font-semibold">{ displayDifficulty(recipe.Difficulty) }</span>
		</p>
		<p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
			Duration: <span class="font-semibold">{ recipe.Duration.Total } min</span>
		</p>
		<p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
			Category: <span class="font-semibold">{ recipe.Category }</span>
		</p>
		if len(recipe.Tags) > 0 {
			<p class="text-xs italic text-gray-500">
				Tags: { displayTags(recipe.Tags) }
			</p>
		}
	</li>
}

templ activityListItem() {
	<li
		class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150 flex justify-between items-center"
	>
		<p class="text-sm md:text-base text-gray-800">
			Rated "Spicy Chicken Wings"
		</p>
		<p class="text-xs md:text-sm text-gray-600 w-fit shrink-0">
			2 days ago
		</p>
	</li>
}

templ logoutSection() {
	<section class="w-full flex flex-col justify-center items-center py-8 border-t border-gray-300 mt-auto">
		<a
			href={ domain.API_AUTH_LOGOUT }
			class="text-center border border-red-500 text-red-500 w-9/10 md:w-1/3 py-2 rounded-lg hover:cursor-pointer hover:bg-red-100 duration-300"
		>
			Logout
		</a>
	</section>
}

templ ProfilePage(user domainUser.User, recipes []domainRecipe.Recipe) {
	@components.Navbar(" profile")
	<div class="w-full h-fit flex justify-center">
		<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 border-l border-r border-gray-300 bg-white flex flex-col">
			@userDetailsSection(user, len(recipes))
			@recipesSection(recipes)
			@favoritesSection(recipes)
			@activitySection()
			@logoutSection()
		</div>
	</div>
}