{% extends 'NivaPortalBundle:common:layout.html.twig' %}

{% block headerAssets %}
    {{ parent() }}
    {{ include( 'NivaPortalBundle:Layout-default:header.html.twig', { 'club': club } ) }}
{% endblock %}

{% set slider = false %}
{% set banner = false %}
{% set square = false %}
{% set fade = false %}

{% for listing in listings %}
    {% if listing.displayType == "SL" %}
        {% set slider = true %}
    {% elseif listing.displayType == "BA" %}
        {% set banner = true %}
    {% elseif listing.displayType == "SQ" %}
        {% set square = true %}
    {% elseif listing.displayType == "FA" %}
        {% set fade = true %}
    {% endif %}
{% endfor %}

{% block content %}

    <!-- Club Logo -->
    {% if club.contentBanner %}
        <img class="logo" src="{{ club.contentBanner }}" />
    {% endif %}

    <!-- Section Logo -->
    {% if section.headBanner %}
        <img class="logo" src="{{ section.headBanner }}"/>
    {% endif %}

    <!-- Slider -->
   {% if slider %}

        <section>

            <div class="flexslider">
                <ul class="slides">
                    {% for listing in listings %}
                        {% if listing.displayType == "SL" %}
                            {% if listing.jumpToContent %}
                                <li>
                                    <a href="{{ path('niva_portal_content', {'clubCode': club.clubCode, 'contentId': listing.getDefaultContent().getContentId() }) }}">
                                        <img src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}" />
                                    </a>
                                </li>
                            {% else %}
                                <li>
                                    <a href="{{ path('niva_portal_listing', {'clubCode': club.clubCode, 'sectionId': section.sectionId, 'listingId': listing.listingId}) }}">
                                        <img src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}"/>
                                    </a>
                                </li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </ul>
            <div>

        </section>
    {% endif %}


    <!-- Fade -->
    {% if fade %}
        <section>
            <div class="flexslider">
                <ul class="slides">
                    {% for listing in listings %}
                        {% if listing.displayType == "FA" %}
                            {% if listing.jumpToContent %}
                                <li>
                                    <a href="{{ path('niva_portal_content', {'clubCode': club.clubCode, 'contentId': listing.getDefaultContent().getContentId() }) }}">
                                        <img src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}" />
                                    </a>
                                </li>
                            {% else %}
                                <li>
                                    <a href="{{ path('niva_portal_listing', {'clubCode': club.clubCode, 'sectionId': section.sectionId, 'listingId': listing.listingId}) }}">
                                        <img src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}"/>
                                    </a>
                                </li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </ul>
            <div>

        </section>
    {% endif %}

    <!-- Banners -->
    <section>

        {% for listing in listings %}
            {% if listing.displayType == "BA" %}

                {% if listing.jumpToContent %}
                    <a href="{{ path('niva_portal_content', {'clubCode': club.clubCode, 'contentId': listing.getDefaultContent().getContentId() }) }}">
                        <img class="banner" src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}" />
                    </a>

                {% else %}
                    <a href="{{ path('niva_portal_listing', {'clubCode': club.clubCode, 'sectionId': section.sectionId, 'listingId': listing.listingId}) }}">
                        <img class="banner" src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}"/>
                    </a>
                {% endif %}
            {% endif %}
        {% endfor %}

    </section>

    <!-- Squares -->
    <section>

        <div class="square">
            {% for listing in listings %}
                {% if listing.displayType == "SQ" %}
                    <div style="display:inline-block;width:140px;">

                    {% if listing.jumpToContent %}
                            <a href="{{ path('niva_portal_content', {'clubCode': club.clubCode, 'contentId': listing.getDefaultContent().getContentId() }) }}">
                                <img style="width:100%!important;max-width:100%!important;" src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}" />
                            </a>
                        <p style="margin-top:0;margin-bottom:30px">{{ listing.getDefaultContent().publicName }}<br>
                            <small>
                                {% if listing.getDefaultContent().type == "IMG" %}Imagen{% endif %}
                                {% if listing.getDefaultContent().type == "MP3" %}Audio / Ringtone{% endif %}
                                {% if listing.getDefaultContent().type == "VID" %}Video{% endif %}
                                {% if listing.getDefaultContent().type == "GAM" %}Juego{% endif %}
                            </small></p>
                    {% else %}
                            <a href="{{ path('niva_portal_listing', {'clubCode': club.clubCode, 'sectionId': section.sectionId, 'listingId': listing.listingId}) }}">
                                <img style="width:100%!important;max-width:100%!important;" src="{{ listing.banner }}" alt="{{ listing.name }}" title="{{ listing.name }}"/>
                            </a>
                    {% endif %}

                    </div>
                {% endif %}

            {% endfor %}
        </div>

    </section>

    {{ club.googleAdwords|raw }}

    {{ include( 'NivaPortalBundle:Layout-default:legal.html.twig', { 'client': client, 'display': 'basic' } ) }}

    {% endblock %}

{% block footerAssets %}
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="{{ asset("bundles/nivaportal/Layout-default/js/jquery.flexslider-min.js") }}"></script>

    <script>

        {% if slider %}

        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                controlNav: false,
                directionNav: true,
                slideshow: true,
                slideshowSpeed: 3000,
                pauseOnAction: false
            });
        });

        {% elseif fade %}

        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "fade",
                controlNav: false,
                directionNav: false,
                slideshow: true,
                slideshowSpeed: 3000
            });
        });

        {% endif %}

    </script>
{% endblock %}