{extends file="layout.tpl"}

{block name='init'}
    {assign var="content_id" value={content attr="id"}}
{/block}

{* Body Class *}
{block name="body-class"}page-content{/block}

{* Page Title *}
{block name='no-return-functions' append}
    {if {$content_id}}
        {$page_title = $TITLE}
    {/if}
{/block}

{* Breadcrumb *}
{block name='no-return-functions' append}
    {if $content_id}
        {$breadcrumbs = []}
        {loop type="content" name="content-breadcrumb" id=$content_id limit="1"}
            {loop name="folder_path" type="folder-path" folder={$DEFAULT_FOLDER}}
                {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL nofilter}]}
            {/loop}
            {$breadcrumbs[] = ['title' => {$TITLE}, 'url'=> {$URL nofilter}]}
        {/loop}
    {/if}
{/block}

{block name="main-content"}
{if $content_id}
    <div class="main row">
        <article id="recette" class="col-md-12" role="main">

            {loop type="recipe" name="recipe-loop" content_id=$content_id limit="1"}
                {if $DIFFICULTY eq 0}{assign var="label_difficulty" value="Facile"}{/if}
                {if $DIFFICULTY eq 1}{assign var="label_difficulty" value="Moyen"}{/if}
                {if $DIFFICULTY eq 2}{assign var="label_difficulty" value="Difficile"}{/if}


                <h1 class="titre-recette">{$TITLE}</h1>
                <div class="entete col-md-12">
                    <span class="preparation"><b>{intl l='Preparation time' d='recettes'}</b><img src="{image file='assets/img/timer.svg' source='Recettes'}" alt="Preparation time">{$PREPARATION_TIME}</span>
                    <span class="cuisson"><b>{intl l='Cooking time' d='recettes'}</b><img src="{image file='assets/img/thermometer.svg' source='Recettes'}" alt="Cooking time">{$COOKING_TIME}</span>
                    <span class="difficulte"><b>{intl l='Difficulty' d='recettes'}</b><img src="{image file='assets/img/cellular.svg' source='Recettes'}" alt="Difficulty">{$label_difficulty}</span>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        {loop type="image" name="image-loop" content=$content_id}
                        <img src="{$IMAGE_URL}">
                        {/loop}
                    </div>
                    <div class="col-md-6"></div>
                </div>


            {/loop}

        </article>

    </div>
{/if}
{/block}

{block name="stylesheet"}
{hook name="content.stylesheet"}
{/block}