recipe.tpl

{extends file="layouts/main.tpl"}
{block name="body"}
<div class="hero" style="background-image: url('./images/banner_4.jpg');">
    <div class="container">
        <h1>{$recipe_data.recipe_name}</h1>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-4">
            <img src="./user/images/{$recipe_data.recipe_image}" alt="{$recipe_data.recipe_name}"/>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-3">
                    <p class="prep-time"><i class="far fa-clock"></i>Prep Time: {$recipe_data.prep_time}</p>
                </div>
                <div class="col-md-3">
                    <p class="cook-time"><i class="fas fa-fire"></i>Cook Time: {$recipe_data.cook_time}</p>
                </div>
                <div class="col-md-3">
                    <p class="difficulty"><i class="fas fa-utensils"></i>Difficulty: {$recipe_data.difficulty}</p>
                </div>
            </div>
            <p>{$recipe_data.recipe_instructions}</p>

            {if $is_fav}
                <button id="removeFav" type="button" class="btn btn-primary mb-3" data-recipeid="{$recipe_data.recipe_id}">
                    Remove From Favourites
                </button>
            {else}
                <button id="addFav" type="button" class="btn btn-primary mb-3" data-recipeid="{$recipe_data.recipe_id}">
                    Add To Favourites
                </button>
            {/if}
        </div>
    </div>
</div>
{/block}
{block name=js}
    <script>
        recipe.init();
    </script>
{/block}