<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thyme Crunch Favorites</title>
    <link rel="stylesheet" th:href="@{css/home.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">
        <div class="recipe-card">
            <div th:if="${guest}" style="text-align:center; padding: 20px 0;">
                <p style="margin-bottom:16px;">Log in to view and save your favorite recipes.</p>
            </div>

            <div th:unless="${guest}">
                <p th:if="${#lists.isEmpty(recipes)}">You have not saved any recipes.</p>

                <div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
                    <a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
                        <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">
                            </div>
                            <p class="card-cost" th:text="${recipe.cost}">Cost</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </main>

    <div class="body-right">
        <div class="sidebar-right">
            <h1>NEW</h1>
            <div class="new-recipes">
            <a th:each="recipe : ${newestRecipes}"
               th:href="@{/recipes/{id}(id=${recipe.id})}"
               class="new-recipe-item">
               <p th:text="${recipe.title}">Title</p>
                <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                    <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                </div>
            </a>
        </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>