<!DOCTYPE html>
<html lang="en">
<head>
    <%- include("partials/meta.ejs")  %> 
    <title>RecipEasy: Favourite Recipes</title>
</head>
<body>
    <div class="container">
        <%- include('partials/header-nav.ejs') %> 
        <main>
            <div class="dashboard">
                <h2>Favourite Recipes</h2>
                <% if(typeof(flashMessage) != "undefined"){%>
                    <h4 class="text-alert"><%= flashMessage %></h4>
                <% } %>
                <div class="fav-recipe-grid">
                <% if(typeof(favouriteRecipes) != "undefined"){ 
                     for (var recipe of Object.values(favouriteRecipes)) { %> 
                        <div class="recipe-card">
                            <div>
                                <p><i class="fa fa-cutlery" aria-hidden="true"></i> <b> <%= recipe.label %> </b> <br>
                                <i class="fa fa-link" aria-hidden="true"></i> Source: <a href="<%= recipe.url %>" target="_blank">
                                <%= recipe.source %> </a> 
                                </p>
                                <p><i class="fa fa-globe" aria-hidden="true"></i> Cuisine Type: <%= recipe.cuisineType %> <br />
                                    <i class="fa-solid fa-bell-concierge"></i> Meal Type: <%= recipe.mealType %> <br />
                                <i class="fa-solid fa-wheat-awn"></i> Diet Type: <%= recipe.dietLabels %> <br /> <br>
                                <a href="/print-recipe/<%= encodeURIComponent(recipe.uri) %>" target="_blank"> <i class="fa fa-download" aria-hidden="true"></i></a>
                                <a href="/remove-recipe-favourite/<%= recipe._id %>">&nbsp; <i class="fa fa-trash-o" aria-hidden="true"></i></a>
                                </p>
                                </p> 
                            </div>
                      </div>
                <% } } %> 
            </div>
            </div>
        </main>
        <%- include("partials/footer.ejs")  %> 
    </div>
</body>
</html>