{% extends "base.html.twig" %}

{% block style %}
    html,
    body{
        height: 100%;
        font-family: Roboto,sans-serif;
    }

    @media (max-width: 740px) {
        html,
        body{
        height: 100vh;
        font-family: Roboto,sans-serif;
        }
    }

    .h1-default{
        font-weight: 700;
        font-size:82px;
        letter-spacing: 0.015em;
        line-height: 1em;
    }

    @media (max-width: 740px) {
        .h1-default{
            font-size: 13vw;
        }
    }
{% endblock %}

{% block intro %}

<div class="view">
    {% if content.intro_image.thumbnails['x400'] is defined %}
        <div class="container-fluid" 
            style="height: 300px;background-image: url('{{ asset(content.intro_image.thumbnails['x400']) }}'); background-repeat: no-repeat; background-size: cover; background-position: 
            {{ content.intr_image_position|replace({'_':' '}) }};">
        </div>
        <div class="mask flex-center rgba-black-light">
            <h1 style="padding-top: 90px;" class="h1-default text-white text-center mt-5 mb-5 text-uppercase">{{ content.title }}</h1>
        </div>
    {% else %}
        <div class="container" 
            style="background:none;background-color:white;">
            <h1 style="padding-top: 90px;" class="h1-default text-black text-center mt-5 mb-3 text-uppercase">{{ content.title }}</h1>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block content %}
    <div class="container">
        {% if content.recettes|default([])|length %}
        <div class="blocks">
            {% for recette in content.recettes %}
                <div class="container my-5">    <!--Section: Content-->
                    {% if recette.type == 'recette' %}
                        <section class="dark-grey-text">
                            <div class="text-center">
                                <h3 class="font-weight-bold mb-4">{{ recette.title }}</h3>
                            </div>
                            <div class="row pr-lg-5">
                                <!--
                                <div class="col-md-5 mb-4 order-2 order-md-1">
                                    <div class="">
                                        <img src="{{ asset('/public/build/website/img/photos/cabri-40.jpg') }}" class="img-fluid" alt="smaple image">
                                    </div>
                                </div>
                                -->
                                <div class="col-md-12 d-flex align-items-center order-1 order-md-2 mb-3">
                                    <div class="text-center">{{ recette.text | raw }}</div>
                                </div>
                            </div>
                    
                        </section>
                        <!--Section: Content-->
                    {% else %}
                        <img src="{{ asset(recette.image.thumbnails['x400']) }}" class="img-fluid rounded mx-auto d-block" alt="smaple image">
                    {% endif %}                
                </div>
                <hr class="w-header my-4">
            {% endfor %}
        </div>
        {% endif %}
        
    </div>
{% endblock %}