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

{% block title %}Home{% endblock %}

{% block body %}
    <main role="main">
        <section class="realisation-show">
            <div class="container">
                <div class="realisation-show__row">
                    <div class="realisation-show__row__gauche swiper" data-controller="swiper">
                        <div class="swiper-wrapper">
                            <img class="swiper-slide" src="{{ vich_uploader_asset(realisation, 'imageFile') | imagine_filter('realSize') }}" alt="Photo {{ realisation.title }}">
                            {% if realisation.imageFilename2  %}
                                <img class="swiper-slide" src="{{ vich_uploader_asset(realisation, 'imageFile2') | imagine_filter('realSize') }}" alt="Photo {{ realisation.title }}">
                            {% endif %}
                            {% if realisation.imageFilename3  %}
                                <img class="swiper-slide" src="{{ vich_uploader_asset(realisation, 'imageFile3') | imagine_filter('realSize') }}" alt="Photo {{ realisation.title }}">
                            {% endif %}
                        </div>
                        {% if realisation.imageFilename2 is empty and realisation.imageFilename3 is empty %}
                            
                        {% else %}
                            <div class="swiper-navigation">
                                <div class="swiper-button-prev">
                                    <img src="{{ asset("images/icones/arrow-left.svg") }}" alt="fleche de gauche">
                                </div>
                                <div class="swiper-button-next">
                                    <img src="{{ asset("images/icones/arrow-right.svg") }}" alt="fleche de droite">
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="realisation-show__row__droite">
                        <h1>        
                            {{ realisation.title }}
                        </h1>
                        <div class="realisation-show__row__droite__tags">
                            <span class="realisation-show__row__droite__tags__client">{{ realisation.client.name }}</span>
                            <span class="realisation-show__row__droite__tags__domaine" style="background-color:{{ realisation.domaine.color }}" >{{ realisation.domaine.name }}</span>
                            {% if realisation.technique is not null %}
                                <span class="realisation-show__row__droite__tags__technique">{{ realisation.technique.name }}</span>
                            {% endif %}
                        </div>
                        <div class="realisation-show__row__droite__text">
                            <p>
                                {{ realisation.description|raw }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}