{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="container">
        <article id="recette" 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>
                <br>
                <div class="entete">
                    <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>
                <form id="form-recette" action="{url path='/admin/module/Recettes/addtocart'}" method="POST" class="clearfix">
                <div class="row">
                    <div class="photo-principale col-md-4">
                        {loop type="image" name="image-loop" content=$content_id visible=true}
                        <img src="{$IMAGE_URL}" alt="Photo principale">
                        {/loop}
                    </div>
                    <div class="col-md-8">
                        <label class="recette-summary">{$SUMMARY|unescape:"html" nofilter}</label>
                        <p class="recette-titre">{intl l='Ingredients' d='recettes'}</p>
                        <table class="table table-striped table-condensed table-ingredients">
                            <thead>
                                <th class="cellule-large">{intl l="Ingredient" d="recettes"}</th>
                                <th class="cellule-etroite">{intl l="Quantity needed" d="recettes"}</th>
                                <th class="cellule-etroite">{intl l="Quantity proposed" d="recettes"}</th>
                                <th class="cellule-etroite">{intl l="Select" d="recettes"}</th>
                            </thead>
                            <tbody>
                            {loop type="recipe_products" name="products-loop" recipe_id=$ID}
                                <tr>
                                    <td>{$PRODUCT_LABEL}</td>
                                    <td>{$QUANTITY_NEEDED}</td>
                                    <td>{$QUANTITY_PROPOSED}&nbsp;({$UNITY})</td>
                                    <td><input type="checkbox" name="pseid-{$PSE_ID}-qty-{$QUANTITY_PROPOSED}" class="cellule-checkbox" {if not $IN_STOCK}disabled{/if}></td>
                                </tr>
                            {/loop}
                                <tr>
                                    <td colspan="3"><i>{intl l="Some products may not be in stock" d="recettes"}</i></td>
                                    <td>
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary">{intl l='Add to cart' d='recettes'}</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <br>
                        <p class="recette-soustitre">{intl l="Additional ingredients" d="recettes"}</p>
                        <label class="autres-ingredients">{$OTHER_INGREDIENTS|unescape:"html" nofilter}</label>
                    </div>
                </div>
                </form>
                <br>
                <br>
                <table class="table table-striped table-steps">
                {loop type="recipe_steps" name="steps-loop" recipe_id=$ID}
                    <tr>
                        <td class="number">{$STEP}</td>
                        <td class="description">{$DESCRIPTION}</td>
                    </tr>
                {/loop}
                </table>
            {/loop}
        </article>
        <div class="bouton-imprimer">
            <button type="button" class="btn btn-primary">{intl l="Print recipe" d="recettes"}</button>
        </div>
    </div>
{/if}
{/block}

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

{block name="after-javascript-include"}
<script>

    $("#form-recette").off('submit').submit(function(ev) {

        if ($('input[name*=pseid-]:checked').length === 0) {
            alert("Vous n'avez choisi aucun produit à rajouter dans votre panier.");
            ev.preventDefault();
        }
    });

    $(".bouton-imprimer button").click(function () {
        window.print();
    });

</script>
{/block}