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

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('js/jcarousel.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('.feature_images')
                    .on('jcarousel:create jcarousel:reload', function () {
                        var element = $(this),
                                width = element.innerWidth();
                        element.jcarousel('items').css('width', width + 'px');
                    })
                    .on('jcarousel:createend', function () {
                        $(this).jcarousel('scroll', 0, false);
                    })
                    .jcarousel({
                        animation: 'slow',
                        wrap: 'circular'
                    });

            var carousel = $('.feature_images').data('jcarousel');

            setInterval(function () {
                carousel.scroll('+=1');
            }, 7000);
        });
    </script>    
{% endblock %}


{% block content %}
    <section class="feature_images">
        <div class="images">
            <div class="image">
                <img src="/images/jardi_i_masvilabarbera.gif" >
            </div>
            <div class="image">
                <img src="{{app.request.getSchemeAndHttpHost() }}/images/porta_vidre-secr_DGE.gif" >
            </div>
            <div class="image">
                <img src="{{app.request.getSchemeAndHttpHost() }}/images/pati_interior_entre_despatxos.gif" >
            </div>
            <div class="image">
                <img src="{{app.request.getSchemeAndHttpHost() }}/images/foto_passadis_aulari.jpg" >
            </div>
        </div>
    </section>
    
    <div class="row content home_content">
        <div class="desktop-8 tablet-4 mobile-full left news_column">
            <section class="content_block no_background news">
                <h2>{{ 'Notícies' |trans({}, 'app') }}</h2>
                <nav class="jumlinks">
                    <a href="{{ path("noticia_index") }}">{{ 'mes_noticies' |trans({}, 'app') }} ></a>
                </nav>
                {% block news %}
                    {{ render(controller('AppBundle:Noticia:resum')) }}
                {% endblock %}
            </section>
        </div>
    </div> 

    {#<div class="row content home_content">
        <div class="desktop-8 tablet-4 mobile-full left">
            <section class="content_block no_background events">
                <h2>{{ 'events_futurs' |trans({}, 'app') }}</h2>
                <nav class="jumlinks">
                    <a href="{{ path("events_index") }}">{{ 'mes_events'|trans({}, 'app') }} ></a>
                </nav>
                {% block events %}
                    {{ render(controller('AppBundle:Event:resum')) }}
                {% endblock %}
            </section>
        </div>
        <div class="desktop-4 tablet-2 mobile-full right"></div>
    </div>#}
{% endblock %}