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

{% block title %}Accueil{% endblock %}

{% block body %}
    <div class="fullwidthbanner">
        <div class="tp-banner">
            <ul>
                {% for slide in slides %}
                    {% if slide.theme == 6592 %}
                        <!-- THEME 1 -->
                        <li data-transition="fade" data-slotamount="5" data-masterspeed="1000"
                            data-title="{{ slide.titrecourt}}">
                            <!-- MAIN IMAGE -->
                            <img
                                src="https://www.kiwicloudcms.com/content/picture/id/{{ slide.fond }}/ql/2000x2000"
                                alt="darkblurbg" data-bgfit="cover" data-bgposition="left top"
                                data-bgrepeat="no-repeat">
                            {% if slide.introduction != null %}
                                <div class="caption title-2 sft"
                                     data-x="50"
                                     data-y="160"
                                     data-speed="1000"
                                     data-start="1000"
                                     data-easing="easeOutExpo">{{ slide.introduction }}
                                </div>
                            {% endif %}
                            {% if slide.texte1 != null %}
                                <div class="caption text sfl"
                                     data-x="50"
                                     data-y="260"
                                     data-speed="1000"
                                     data-start="1800"
                                     data-easing="easeOutExpo">
                                    {{ slide.texte1 }}
                                </div>
                            {% endif %}
                            {% if slide.texte2 != null %}
                                <div class="caption text sfl"
                                     data-x="50"
                                     data-y="360"
                                     data-speed="500"
                                     data-start="2000"
                                     data-easing="Sine.easeOut">
                                    {{ slide.texte2 }}
                                </div>
                            {% endif %}
                        </li>
                    {% endif %}
                    {% if slide.theme == 6593 %}
                        <li data-transition="fade" data-slotamount="5" data-masterspeed="1000"
                            data-title="{{ slide.titrecourt }}">
                            <!-- MAIN IMAGE -->
                            <img
                                src="https://www.kiwicloudcms.com/content/picture/id/{{ slide.fond }}/ql/2000x2000"
                                alt="darkblurbg" data-bgfit="cover" data-bgposition="left top"
                                data-bgrepeat="no-repeat">
                            {% if slide.introduction != null %}
                                <div class="caption text-center-top sft"
                                     data-x="center"
                                     data-y="190"
                                     data-speed="1000"
                                     data-start="1400"
                                     data-easing="easeOutExpo">
                                    {{ slide.introduction }}
                                </div>
                            {% endif %}
                            {% if slide.texte1 != null %}
                                <div class="caption text-center-btm sfr text-center"
                                     data-x="center"
                                     data-y="325"
                                     data-speed="1000"
                                     data-start="1600"
                                     data-easing="easeOutExpo">
                                    {{ slide.texte1 }}
                                </div>
                            {% endif %}
                            {% if slide.texte2 != null %}
                                <div class="caption text-center-btm sfr text-center"
                                     data-x="center"
                                     data-y="405"
                                     data-speed="1000"
                                     data-start="1800"
                                     data-easing="easeOutExpo">
                                    {{ slide.texte2 }}
                                </div>
                            {% endif %}
                            <!-- <div class="caption sfb rev-buttons tp-resizeme"
                                 data-x="center"
                                 data-y="380"
                                 data-speed="500"
                                 data-start="1800"
                                 data-easing="Sine.easeOut">
                                <a href="#" class="btn border-white btn-lg">View features</a>
                            </div> -->
                        </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div><!--full width banner-->
    <!--revolution end-->

    <div class="divide60"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
                <div class="center-heading vide-titre">
                    <h2>Bienvenue sur le site de <strong>Lionel Tritschler</strong></h2>
                    <span class="center-line"></span>
                    <p class="sub-text margin40">
                        Peintre &amp; plasticien
                    </p>
                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('*[data-default][data-hidden]').hover(function () {
                $(this).find('img')[0].src = $(this).data('hidden');
            }, function () {
                $(this).find('img')[0].src = $(this).data('default');
            });

            $(".phone, .email, .linkedin").on("click", function (e) {
                e.stopPropagation();
            });
        });
    </script>
{% endblock %}