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"
import domainEngagement "github.com/haydenhargreaves/Potion/internal/domain/engagement"

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(engagement []domainEngagement.Engagement) {
<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">
    for _, eng := range engagement {
    @activityListItem(eng)
    }
    <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(engagement domainEngagement.Engagement) {
<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">
    { engagement.Message }
  </p>
  <p class="text-xs md:text-sm text-gray-600 w-fit shrink-0">
    { engagement.Created.Format("01/02/2006") }
  </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, engagement []domainEngagement.Engagement) {
@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(engagement)
    @logoutSection()
  </div>
</div>
}