{% extends 'Backend/_layout.html.twig' %}

{% block stylesheets %}
    {% include 'styles.home.html.twig' %}
    <link href="{{ asset('frontend/styles/newsletter.css') }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block content %}
    <div class="containers" style="text-align: center">

        {% for newsletter in newsletter %}

            <img class="myImg imgLesTrois" src="{{ asset('images/newsletter/' ~ newsletter.imageName|url_encode) }}" style="width: 100%; height: 650px; text-align: center; margin: auto">


        {% endfor %}




        {#


        <div style="margin: auto; width: 700px">
                <p style="text-align: right; font-size: 26px">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                    <a href="{{ path('admin_newsletter_edit', { 'id': newsletter.id }) }}" style="text-decoration: none">Modifier</a>
                </p>

                <h4 class="text_align" style="margin-top: 20px; color: #2980b9; font-size: 20px; text-align: center">NEWSLETTER PANÉLISTES</h4>
                <div class=" text_align divEnglobEntete" id="aLaMemeLigne" style="display: flex">

                    <div class="text_align marginAuto" id="imgEntete" style="width: 50%">
                        {% if newsletter.img != null %}
                            <img class="myImg imgLeft imgEntete imgTail" src="{{ asset('img_newsletter/' ~ newsletter.img|url_encode) }}" style="width: 80%">
                        {% endif %}
                    </div>

                    <div class="aLaLigne aCacherSml divSalutationSml" style="margin-top: 30px; padding-left: 10px">
                        <p class="presentation">{{ newsletter.presentation }}</p>
                        <p class="salutation" style="text-align: left">{{ newsletter.salutation }}</p>
                    </div>
                </div>
            </div>

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img class="myImg imgLesTrois" style="text-align: center;width: 100%; height: 650px; " src="{{ asset('img_newsletter/' ~ newsletter.footerImgUn|url_encode) }}">
                        <div class="carousel-caption">
                            <h3>{{ newsletter.footerTextUn }}</h3>
                            <p>{{ newsletter.footerTextDeux }}</p>
                        </div>
                    </div>

                    <div class="item">
                        <img class="myImg imgLesTrois" src="{{ asset('img_newsletter/' ~ newsletter.footerImgDeux|url_encode) }}" style="width: 100%; height: 650px; text-align: center; margin: auto">
                        <div class="carousel-caption">
                            <h3>{{ newsletter.footerTextTrois }}</h3>
                            <p>{{ newsletter.footerTextQuatre }}</p>
                        </div>
                    </div>

                    <div class="item">
                        <img class="myImg imgLesTrois" src="{{ asset('img_newsletter/' ~ newsletter.footerImgTrois|url_encode) }}" style="width: 100%; height: 650px; text-align: center; margin: auto">
                        <div class="carousel-caption">
                            <h3>{{ newsletter.footerTextCinq }}</h3>
                            <p>{{ newsletter.footerTextSix }}</p>
                        </div>
                    </div>
                    <div class="item">
                        <img class="myImg imgLesTrois" src="{{ asset('img_newsletter/' ~ newsletter.footerImgQuatre|url_encode) }}" style="width: 100%; height: 650px; text-align: center; margin: auto">
                        <div class="carousel-caption">
                            <h3>{{ newsletter.footerTextSept }}</h3>
                            <p>{{ newsletter.footerTextHuit }}</p>
                        </div>
                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

            <div class="aLaLigne aCacherSml divSalutationSml" style="margin-top: 40px">
                <p class="textDesc">{{ newsletter.textDesc }}</p>
            </div>


            #}
    </div>

    {% include 'js.html.twig' %}

{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        function show(elementId) {
            document.getElementById("id1").style.display="none";
            document.getElementById(elementId).style.display="block";
        }
        function hide(elementId) {
            document.getElementById("id1").style.display="block";
            document.getElementById(elementId).style.display="none";
        }

        var acc = document.getElementsByClassName("accordion");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }

        var coll = document.getElementsByClassName("collapsible_facebook");
        var ii;
        for (i = 0; ii < coll.length; ii++) {
            coll[ii].addEventListener("click", function() {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                    content.style.display = "none";
                } else {
                    content.style.display = "block";
                }
            });
        }
    </script>
{% endblock %}