{% extends 'pageTemplateRecipe.html.twig' %}
{% block content %}
{% if error %}
<p class="danger">{{ error }}</p>
{% else %}
<div class="stage no-offset-top">
<div class="stage-image main recipe">
<div class="image">
{{ recipe.getHeaderImage().getThumbnail("recipeHeaderImage" ~ bundleName).getHTML() | raw }}
{#IE Fix for thumbnails rendering start#}
<style>
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.stage-image.main.recipe > .image {
width: 100%;
height: 100%;
background: url( {{ recipe.getHeaderImage() }}) center right 100%/cover no-repeat;
}
.stage-image.main.recipe > .image img {
display: none;
}
}
</style>
{#IE Fix for thumbnails rendering end#}
</div>
<div class="text">
<div class="main-content flex-col">
<div class="col xs-12">
<div class="stage-content-container">
<div class="content stage-text">
<div class="content-row headline">
<h1>{{ recipe.getTitle() |trans|trademark }}</h1>
</div>
<div class="content-row icon-row">
<div class="items">
<span class="icon time"></span>
<p class="uppercase">{{ recipe.getDuration() |trans }}</p>
</div>
<div class="items">
<span class="icon toque"></span>
<p class="uppercase">{{ recipe.getLevel() |trans }}</p>
</div>
<div class="items">
<span class="icon cutlery"></span>
<p class="uppercase">{{ 'Serves' |trans }} {{ recipe.getServes() |trans }}</p>
</div>
</div>
<div class="content-row text desktop-only">
<p>{{ recipe.getTeaserText() |trademark }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="with-anchor">
<a href="#content-section" class="content-anchor flex-column box-align-center offset-top"></a>
</div>
</div>
</div>
<div class="section recipe-details-wrapper mobile-only" id="content-section">
<div class="main-content flex-col">
<div class="col xs-12">
<div class="text">
<p>{{ recipe.getTeaserText() |trademark }}</p>
</div>
</div>
</div>
</div>
<div class="section recipe-details-wrapper">
<div class="main-content flex-col">
<div class="col xs-12 m-4 xl-3">
<div class="ingredients">
<h5>{{ 'Zutaten' |trans }}</h5>
{% for ingredient in recipe.getRecipeIngredients() %}
<p>{{ ingredient.0 }} <span>{{ ingredient.1 }}</span></p>
{% endfor %}
</div>
</div>
<div class="col xs-12 m-8 xl-9">
<div class="product-info-container text-only">
<h5>{{ 'Rezept' |trans }}</h5>
{{ recipe.getRecipeText() | raw }}
</div>
</div>
</div>
</div>
{% if recipe.getRelatedProducts() is not empty %}
<div class="section recipe-related-products-wrapper">
<div class="main-content flex-col">
{% for product in recipe.getRelatedProducts() %}
{% if product.getDefaultProduct() is not empty %}
{% set product = product.getDefaultProduct()[0] %}
{% endif %}
{% set detailProductUri = pimcore_url(
{
"name": product.getUrlTitle(),
"articlenumber": product.getArticleNumber()
},
"shopHandlerProductDetail"
) %}
<div class="col xs-12 m-6 l-4">
<div class="teaser product-item">
<div class="teaser-content">
<div class="teaser-text-box">
<div class="teaser-image-front">
<div>
{% set productListImageThumb = product.getListViewRepresentationNew() |objectFallbackImage %}
{{ productListImageThumb.getThumbnail("relatedProductsBottle" ~bundleName).getHtml() |raw }}
</div>
</div>
<div class="teaser-text-container">
<div class="title-box">
<p class="greyed">{{ 'Made with' |trans }}</p>
<h4>{{ product.getName() |trademark }}</h4>
</div>
<div class="teaser-link">
<a class="button" href="{{ detailProductUri }}" aria-label="{{ 'View Product' |trans }}">
<span>
{{ 'View Product' |trans }}
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if recipe.getVideo() is not empty and recipe.getVideoOverlay() is not empty %}
<div class="section">
<div class="video-container with-overlay">
{% set videoIDResult = recipe.getVideo().getData() %}
<div class="video-wrapper">
<div class="iframe-container {{ videoIDResult }}">
<div id="{{ videoIDResult }}" class="mute-yt-player-container" data-video-id-result="{{ videoIDResult }}"></div>
</div>
</div>
<div class="image video-overlay">
<div class="play-button-container">
<h2>{{ 'Play Video' |trans }}</h2>
<span class="icon play-button"></span>
</div>
{{ recipe.getVideoOverlay().getThumbnail("iframeOverlay").getHTML() | raw }}
{#IE Fix for thumbnails rendering start#}
<style>
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.image.video-overlay {
width: 100%;
height: 500px;
background: url( {{ pimcore_image("iframeOverlay").getSrc() }}) center right 100%/cover no-repeat;
}
.image.video-overlay img {
display: none;
}
}
</style>
{#IE Fix for thumbnails rendering end#}
</div>
</div>
</div>
{% endif %}
{% if recipe.getRelatedRecipes() is not empty %}
<div class="section panel {% if recipe.getRelatedRecipes()|length > 3 %}has-slider{% else %}no-slider{% endif %} one-third recipe-page">
<div class="main-content flex-col">
<div class="col xs-12">
<div class="headline text-center">
<h3>{{ 'Ähnliche Rezepte' |trans }}</h3>
</div>
<div class="panel-container">
<div class="panel-content">
<div class="flex-col panel-slider">
{% for relatedRecipes in recipe.getRelatedRecipes() %}
{% set detailRecipeUri = pimcore_url(
{
"name": relatedRecipes.getUrlTitle(),
"rezeptid": relatedRecipes.getId()
},
"recipeDetail"
) %}
<div class="col xs-12 m-6 l-6 xl-4 one-third">
<div class="teaser recipe-item">
<div class="teaser-content">
<div class="image">
{% set addBundleName = '' %}
{% if bundleName == 'DeveleyLoewensenfBundle' %}
{% set addBundleName = bundleName %}
{% endif %}
{{ relatedRecipes.getHeaderImage().getThumbnail("TeaserProductStoryImage" ~ addBundleName).getHTML() | raw }}
</div>
<div class="teaser-text-box">
{% if relatedRecipes.getRelatedProducts() is defined and relatedRecipes.getRelatedProducts() is not null %}
{% set recipeFirstRelatedRecipes = relatedRecipes.getRelatedProducts()|first %}
{% if recipeFirstRelatedRecipes.getListViewRepresentationNew() is defined and recipeFirstRelatedRecipes.getListViewRepresentationNew() is not null %}
<div class="teaser-image-front">
<div>
{{ recipeFirstRelatedRecipes.getListViewRepresentationNew().getThumbnail("TeaserProductStoryBottle").getHTML() | raw }}
</div>
</div>
{% endif %}
{% endif %}
<div class="teaser-text-container">
<div class="title-box">
<h4>{{ relatedRecipes.getTitle() |trademark }}</h4>
</div>
<div class="teaser-link">
<a class="button desk-no-before-small" href="{{ detailRecipeUri }}" aria-label="{{ 'Mehr erfahren' |trans }}">{{ 'Mehr erfahren' |trans }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endblock %}