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

{% block title %}Pas si bête{% endblock %}

{% block body %}
    <main>
        <div id="hautContenu"></div>

        <div id="mainContent">

            <a name="hautContenu"></a>
            {% if geste is null %}
            <h1>Problème de contenu</h1>
            {% else %}
            <ul id="ariane" class="breadcrumbs">
                <li><a href="#" title="Retour à l'accueil" class="home">Accueil</a></li>
                <li>10 gestes simples</li>
                <li>{{ geste.titre }}</li>
                <li><a href="{{ path('geste_edit', {'id': geste.id}) }}">Modifier</a></li>
            </ul>


            <div id="zone1" class="contenu">
                <div class="complet">
                    <div class="bestiaire {{ geste.nom }}" style="overflow:hidden;">
                        <div class="colonneTexte" style="left:-800px;">
                            <h1>{{ geste.titre }}</h1>
                            <div>
                                <p>{{ geste.description | raw }}</p>
                            </div>
                        </div>
                        <div class="colonneIllust" style="right:-800px;">
                            <div data-begin="0.137" data-bgcolor="transparent" data-dimension="280" data-fgcolor="#fff"
                                 data-fill="transparent" data-fontsize="16" data-info="Les bons gestes" data-percent="94"
                                 data-width="5" id="bulle" data-text=" "></div>
                            <div class="circle-text-dessus">
                                <p>{{ geste.impact | raw }}</p>
                            </div>
                            <figure><img src="{{ asset('images/' ~ geste.image) }}" class="imageBestiaire"
                                         alt="{{ geste.titre }}"
                                         title="{{ geste.titre }}" />
                                <figcaption>{{ geste.titre }}</figcaption>
                            </figure>
                            <h4 class="tag">{% for tag in geste.tags %}<span>{{ tag }}</span>{% endfor %}</h4>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
            <div class="row" id="navigGestes">
                <ul class="inline-list gestes-navigation">
                    {% for g in gestes %}
                    <li>
                        <div class="{{ g.nom }}"><a href="{{ path('geste',{'id':g.id}) }}" title="{{ g.titre }}">
                                <figure><img src="{{ asset('images/' ~ g.image) }}" alt="{{ g.titre }}"
                                             title="{{ g.titre }}" />
                                </figure>
                            </a></div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </main>
{% endblock %}