{{#each this}}



        {{#if html}}
            <!-- HTML Block -->
            <div id="component-{{ @index }}" class="html subcontainer">
                {{{ html.html }}}
            </div>
        {{/if}}




        {{#if video}}
            <!-- Video -->
            <div id="component-{{ @index }}" class="video subcontainer">
                <div>
                    <iframe frameborder="0" src="{{ video.video }}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        {{/if}}



        {{#if block}} 
            <!-- L/R Block -->
            <div id="component-{{ @index }}" class="block container">
                <div class="bg">
                    {{#ifCond block.direction '==' 'right'}}
                        <div class="image" style="background-image:url('{{ block.image }}');">
                            <img src="{{ block.image }}" />
                        </div>
                    {{/ifCond}}
                    <div class="content">
                        {{{ block.content }}}
                    </div>
                    {{#ifCond block.direction '==' 'left' }}
                        <div class="image" style="background-image:url('{{ block.image }}');">
                            <img src="{{ block.image }}" />
                        </div>
                    {{/ifCond}}
                </div>
            </div>
        {{/if}}



        {{#if quote}}
            <!-- Quote -->
            <blockquote id="component-{{ @index }}" class="quote subcontainer">
                <q>{{ quote.cite }}</q>
                {{#if quote.author}}
                    <cite>{{ quote.author }}</cite>
                {{/if}}
            </blockquote>
        {{/if}}
 


        {{#if products}}
            <!-- product Slider -->
            <div id="component-{{ @index }}" class="featured">

                {{#if products.title}}
                    <h4>{{ products.title }}</h4>
                {{/if}}
                <div class="container collection swiper-container" data-article-products="{{#each products.product}}{{ this.value }}{{#if @last }}{{ else }},{{/if}}{{/each}}">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon--full-color icon-preload-full-color" viewBox="0 0 100 100"><circle fill="#fff" cx="6" cy="50" r="6"><animate attributename="opacity" dur="1s" values="0;1;0" repeatcount="indefinite" begin=".1"/></circle><circle fill="#fff" cx="26" cy="50" r="6"><animate attributename="opacity" dur="1s" values="0;1;0" repeatcount="indefinite" begin=".2"/></circle><circle fill="#fff" cx="46" cy="50" r="6"><animate attributename="opacity" dur="1s" values="0;1;0" repeatcount="indefinite" begin=".3"/></circle></svg>
                </div>

            </div>
        {{/if}}



        {{#if statement}}
            <!-- Statement -->
            <div id="component-{{ @index }}" class="subcontainer statement">
                {{#if statement.headline}}
                    <h3>{{ statement.headline }}</h3>
                {{/if}}
                <p>{{ statement.statement }}</p>
            </div>
        {{/if}}



        {{#if download}}
            <!-- Download -->
            <div id="component-{{ @index }}" class="subcontainer">
                <a href="{{ download.file }}" class="download">
                    <span class="content">
                        <span>{{ download.title }}</span>
                        <span>{{ download.details }}</span>
                    </span>
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-download" viewBox="0 0 105 105"><path fill-rule="evenodd" clip-rule="evenodd" d="M52.5 103.483c28.157 0 50.983-22.826 50.983-50.983 0-28.157-22.826-50.983-50.983-50.983-28.157 0-50.983 22.826-50.983 50.983 0 28.157 22.826 50.983 50.983 50.983zm0 1.517c28.995 0 52.5-23.505 52.5-52.5S81.495 0 52.5 0 0 23.505 0 52.5 23.505 105 52.5 105z" fill="#3A3939"/><path fill-rule="evenodd" clip-rule="evenodd" d="M76.778 75.564H29.436v-1.518h47.342v1.518zM53.107 26.402a.91.91 0 0 1 .91.91V64.64a.91.91 0 0 1-1.82 0V27.312a.91.91 0 0 1 .91-.91z" fill="#3A3939"/><path fill-rule="evenodd" clip-rule="evenodd" d="M63.051 55.695a.91.91 0 0 1 0 1.287l-9.3 9.3a.91.91 0 0 1-1.288 0l-9.3-9.3a.91.91 0 0 1 1.287-1.287l8.657 8.657 8.657-8.657a.91.91 0 0 1 1.287 0z" fill="#3A3939"/></svg> 
                </a>
            </div> 
        {{/if}}



        {{#if recipe}}
            <!-- Recipe -->
            <div id="component-{{ @index }}" class="recipe subcontainer">
                <h2>{{ recipe.title }}</h2>
                <div class="overview">
                    {{#if recipe.difficulty}}
                    <div>
                        <strong>Difficulty</strong>
                        {{ recipe.difficulty }}
                    </div>
                    {{/if}}
                    {{#if recipe.cost}}
                    <div>
                        <strong>Cost</strong>
                        {{ recipe.cost }}
                    </div>
                    {{/if}}
                    {{#if recipe.time}}
                        <div>
                            <strong>Time</strong>
                            {{ recipe.time }}
                        </div>
                    {{/if}}
                    {{#if recipe.yield}}
                        <div>
                            <strong>Yield</strong>
                            {{ recipe.yield }}
                        </div>
                    {{/if}}
                </div>
                <div class="ingredients">
                    <h4>Ingredients</h4>
                    <ul>
                        {{#each recipe.ingredient}}
                            <li>{{ this }}</li>
                        {{/each}}
                    </ul>
                </div>
                <div class="directions">
                    <h4>Directions</h4>
                    <ol>
                        {{#each recipe.direction}}
                            <li>{{ this }}</li>
                        {{/each}}
                    </ol>
                </div>
            </div>
        {{/if}}


    {{/each}}