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

{% block title %}{{ 'bworld-page-title' | trans ( [], 'bworld' , langue )  }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('assets/style/css/pages_bworld.css') }}">
{% endblock %}


{% block body %}
<section class="d-flex flex-column">

    <div class="p-2 logo_bworld">
        <div class="logo_bworld_gradient"></div>
        <img src="{{ asset('assets/images/home/logo_bworld.svg') }}" alt="Logo B-world">
    </div>


    <!-- 1 -->
    <div id="book_1" class="container py-4 book_bloc"> 
        <div class="p-4 m-2">
            <h1>{{ 'book-1-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Voltaire — </h2>

            <p>{{ 'b1-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b1-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b1-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
        <img src="{{ asset('assets/images/b_world/Livre_Zadig_ou_la_destinée_Voltaire.png') }}" alt="{{ 'book-1-img' | trans ( [], 'bworld' , langue )  }}">
    </div>


    <!-- 2 -->
    <div id="book_2" class="container py-4 book_bloc"> 
        <img src="{{ asset('assets/images/b_world/Quand-les-lucioles-s-arretent-de-briller.jpg') }}" alt="{{ 'book-2-img' | trans ( [], 'bworld' , langue )  }}">
        <div class="p-4 m-2">
            <h1>{{ 'book-2-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Willy Elphège Miabatoussa — </h2>

            <p>{{ 'b2-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b2-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b2-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
    </div>


    <!-- 3 -->
    <div id="book_3" class="container py-4 book_bloc"> 
        <div class="p-4 m-2">
            <h1>{{ 'book-3-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Laurène Lubanza — </h2>
            <p>{{ 'b3-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b3-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b3-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b3-description-r4' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
        <img src="{{ asset('assets/images/b_world/Barry-I-love-you.jpg') }}" alt="{{ 'book-3-img' | trans ( [], 'bworld' , langue )  }}">
    </div>

    <!-- 4 -->
    <div id="book_4" class="container py-4 book_bloc"> 
        <img src="{{ asset('assets/images/b_world/Relentless_Tim_Grover.jpg') }}" alt="{{ 'book-4-img' | trans ( [], 'bworld' , langue )  }}">
        <div class="p-4 m-2">
            <h1>{{ 'book-4-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Tim S. Grover — </h2>

            <p>{{ 'b4-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b4-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b4-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b4-description-r4' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b4-description-r5' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
    </div>


    <!-- 5 -->
    <div id="book_5" class="container py-4 book_bloc"> 
        <div class="p-4 m-2">
            <h1>{{ 'book-5-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Michelle Obama — </h2>

            <p>{{ 'b5-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b5-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b5-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b5-description-r4' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
        <img src="{{ asset('assets/images/b_world/Becoming_Michelle_Obama.jpg') }}" alt="{{ 'book-5-img' | trans ( [], 'bworld' , langue )  }}">
    </div>


    <!-- 6 -->
    <div id="book_6" class="container py-4 book_bloc"> 
        <img src="{{ asset('assets/images/b_world/My_way.png') }}" alt="{{ 'book-6-img' | trans ( [], 'bworld' , langue )  }}">
        <div class="p-4 m-2">
            <h1>{{ 'book-6-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — {{ 'book-6-author' | trans ( [], 'bworld' , langue )  }} — </h2>

            <p>{{ 'b6-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b6-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b6-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b6-description-r4' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b6-description-r5' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
    </div>

    <!-- 7 -->
    <div id="book_7" class="container py-4 book_bloc">
        <div class="p-4 m-2">
            <h1>{{ 'book-7-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Conversations avec Paul Kagame, Président du Rwanda — </h2>

            <p>{{ 'b7-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b7-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b7-description-r3' | trans ( [], 'bworld' , langue )  }}</p>

            {# Si la ligne 4 a une traduction différente de vide le texte s'affiche #}
            {% if 'b7-description-r4' | trans ( [], 'bworld' , langue ) != "" %}
                <p>{{ 'b7-description-r4' | trans ( [], 'bworld' , langue )  }}</p>
            {% endif %}

        </div> 
        <img src="{{ asset('assets/images/b_world/L_homme_de_fer.png') }}" alt="{{ 'book-7-img' | trans ( [], 'bworld' , langue )  }}">
    </div>


    <!-- 8 -->
    <div id="book_8" class="container py-4 book_bloc"> 
        <img src="{{ asset('assets/images/b_world/Antonio_Machado_ Caminante.png') }}" alt="{{ 'book-8-img' | trans ( [], 'bworld' , langue )  }}">
        <div class="p-4 m-2">
            <h1>{{ 'book-8-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Antonio Machado — </h2>

            <p>{{ 'b8-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b8-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b8-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
    </div>


    <!-- 9 -->
    <div id="book_9" class="container py-4 book_bloc">
        <div class="p-4 m-2">
            <h1>{{ 'book-9-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — Léopold Sédar Senghor — </h2>

            <p>{{ 'b9-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b9-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b9-description-r3' | trans ( [], 'bworld' , langue )  }}</p>

            {# Si la ligne 4 à une traduction différente de vide le texte s'affiche #}
            {% if ('b9-description-r4' | trans ( [], 'bworld' , langue ) != "")  %}
                <p>{{ 'b9-description-r4' | trans ( [], 'bworld' , langue )  }}</p>
            {% endif %}
         </div> 
        <img src="{{ asset('assets/images/b_world/Femme_noire_poem_2.jpg') }}" alt="{{ 'book-9-img' | trans ( [], 'bworld' , langue )  }}">
    </div>

    <!-- 10 -->
    <div id="book_10" class="container py-4 book_bloc"> 
        <img src="{{ asset('assets/images/b_world/Le_Prince_Machiavel.png') }}" alt="{{ 'book-10-img' | trans ( [], 'bworld' , langue )  }}">
        <div class="p-4 m-2">
            <h1>{{ 'book-10-title' | trans ( [], 'bworld' , langue )  }}</h1>
            <h2> — {{ 'book-10-author' | trans ( [], 'bworld' , langue )  }} — </h2>

            <p>{{ 'b10-description-r1' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b10-description-r2' | trans ( [], 'bworld' , langue )  }}</p>
            <p>{{ 'b10-description-r3' | trans ( [], 'bworld' , langue )  }}</p>
        </div>
    </div>

</section>
{% endblock %}