{% extends 'Front/layout.html.twig' %}

{% set metatitle = maincontent.metatitle ? maincontent.metatitle : maincontent.menu ~ ' - Cgénial' %}
{% set metadescription = maincontent.metadescription? maincontent.metadescription: null %}

{% block javascripts %}
    <script>
        //<![CDATA[
        $(function() {
            $( "#accordion" ).accordion({
                collapsible: true,
                active: false,
                heightStyle: "content"
            });

            $('.fancybox').fancybox();
            
            $('.ongletPix').click(function () {
                if ($('.listVideos').addClass('on')) {
                    $(this).addClass('current');
                    $('.ongletVideo').removeClass('current');
                    $('.listVideos').hide().removeClass('on');
                    $('.listPix').show().removeClass('off').addClass('on');
                }
                return false;
            });

            $('.ongletVideo').click(function () {
                if ($('.listPix').addClass('on')) {
                    $(this).addClass('current');
                    $('.ongletPix').removeClass('current');
                    $('.listPix').hide().removeClass('on');
                    $('.listVideos').show().removeClass('off').addClass('on');
                }
                return false;
            });
        });
        //]]>
    </script>
{% endblock %}

{% block body %}
<div class="content presentation {{ maincontent.menu.class }}">
<!--Page présentation- {#{ menu }#}-->
    <div class="text">
        {#% for maincontent in main %#}
            <h1>{{ maincontent.title }}</h1>
            <!--{#{ maincontent.created|date("d/m/Y") }#}-->
            {{ maincontent.article|raw }}<br/>
        {#% endfor %#}
    </div>

    <div id="accordion">
        {% for content in contents %}
            <h3>{{ content.title }}</h3>
            <div>
            {{ content.article|raw }}<br/>
            {% if content.picture!='' %}
                <img src="{{ asset(content.getWebPath()) }}" alt="{{ content.title }}" width="50" />
            {% endif %}
                </div>
        {% endfor %}
    </div>

    <div class="blockPixVideo">
        <ul class="onglets">
            {% if pictures != null %}
                <script>
                    //<![CDATA[
                    $(function () {
                        $('.listVideos').addClass('off');
                        $('.ongletPix').addClass('current');
                    });
                    //]]>
                </script>
                <li><a class="ongletPix" href="">Photos</a></li>
            {% endif %}
            {% if videos != null %}
                {% if pictures == null %}
                    <script>
                        //<![CDATA[
                        $(function () {
                            $('.listVideos').removeClass('off').addClass('on');
                            $('.listPix').addClass('off');
                            $('.ongletVideo').addClass('current');
                        });
                        //]]>
                    </script>
                {% endif %}
                    <li><a class="ongletVideo" href="">Vidéos</a></li>
            {% endif %}
        </ul>
        <div class="clear"></div>
        <ul class="listPix">
            {% for picture in pictures %}
                <li>
                    <div class="imgBlock">
                        <a class="fancybox" href="{{ asset(picture.getWebPathPicture()) }}" title="{{ picture.title }}" data-fancybox-group="gallery">
                            <img src="{{ asset(picture.getWebPathPicture()) }}" alt="{{ picture.title }}">
                        </a>
                    </div>
                </li>
            {% endfor %}
        </ul>
        <ul class="listVideos">
            {% for video in videos %}
                <li class="itemVideo">
                    <a href="{{ path('video', {ref:video.path}) }}" class="imgBlock fancybox fancybox.ajax">
                        <img src="//i1.ytimg.com/vi/{{ video.path }}/default.jpg" alt="{{ video.title }}">
                    </a>
                    <h4>{{ video.title }}</h4>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
    {#{ render(controller('AppBundle:Templates:modules', {menu:menu})) }#}
{% endblock %}