<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <title>Profile - Thyme Crunch</title>
    <link rel="stylesheet" th:href="@{/css/public-profile.css}">
    <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
</head>
<body>

<div class="header-wrap">
<a th:href="@{/explore}">
<header class="top-header">
    <img th:src="@{/images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
    <h1 class="site-name">
    Thyme Crunch
    </h1>
    <img th:src="@{/images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
</a>
</div>

<div class="body">

    <div class="body-left">
        <nav class="sidebar-left">
        <ul>
                <li><a th:href="@{/explore}">Explore</a></li>
                <li th:unless="${guest}"><a th:href="@{/favorites}">Saved</a></li>
                <li th:unless="${guest}"><a th:href="@{/my-profile}">Profile</a></li>

                <li th:if="${guest}" class="login-link">
                    <a th:href="@{/login}">Login</a> or <a th:href="@{/register}">Sign Up</a> to create and save recipes
                </li>

                <li th:unless="${guest}">
                    <form th:action="@{/logout}" method="post">
                        <input type="image" th:src="@{/images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
                    </form>
                </li>
         </ul>
    </nav>

        <a th:href="@{/create}" class="create_icon">
            <img th:src="@{/images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
        </a>
    </div>

    <main class="main-content">
        <h2 th:text="${profile.effectiveDisplayName} + '\'s Recipes'">User's Recipes</h2>

        <p th:if="${#lists.isEmpty(profile.recipes)}">This user has not created any recipes yet.</p>

        <div class="recipe-card" th:unless="${#lists.isEmpty(profile.recipes)}">
            <th:block th:each="recipe : ${profile.recipes}">
                <div class="card-wrapper">
                    <a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card">
                        <div class="card-text">
                            <h2 th:text="${recipe.title}">Recipe Title</h2>
                            <p th:text="${recipe.description}">Description</p>
                        </div>
                        <div class="card-right">
                            <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                                <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
                            </div>
                            <p class="card-cost" th:text="${recipe.cost}">Cost</p>
                        </div>
                    </a>
                </div>
            </th:block>
        </div>
    </main>

    <div class="body-right">
        <div class="sidebar-right">
            <p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
            <p th:text="'@' + ${profile.username}">@username</p>
            <div class="bio-wrap">
                <p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
            </div>
        </div>
    </div>

</div>

<script>
function renderCost(cost) {
    const num = parseInt(cost, 10);
    if (!num || num <= 0) return '';
    if (num >= 4) return '$$$$';
    return '$'.repeat(num);
}

document.querySelectorAll('.card-cost').forEach(el => {
    el.textContent = renderCost(el.textContent);
});
</script>

</body>
</html>