{% extends "base1col.html" %}
{% load staticfiles i18n %}
{% load thumbnail %}


{% block extraheader %}
    <link rel="stylesheet" href="{% static 'reserved/css/bootstrap-image-gallery.min.css' %}">
{% endblock extraheader %}

{% block slider %}

    <div id="carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for img in images %}
                <li data-target="#myCarousel" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %} class="active"{% endif %}></li>
             {% endfor %}
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
            {% if images %}
                {% for img in images %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        <img src="{{ img.image.url }}" alt="{{ img.title }}" width="1170" height="458" style="height: 458px;">
                    </div>
                {% endfor %}
            {% else %}
                <div class="item">
                    <img src="{% static 'website/img/concerto1.jpg' %}">
                </div>
            {% endif %}
        </div>
    </div>

    <hr>

{% endblock slider %}


{% block main %}
    <div class="row">
        <div class="{% if events %}span6{% else %}span12{% endif %}">
            <div class="bs-docs-example">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#home-it" data-toggle="tab"><img
                            src="{% static 'flag/flags/24/Italy.png' %}" alt="Canticorum Italy"/></a></li>
                    <li><a href="#home-en" data-toggle="tab"><img
                            src="{% static 'flag/flags/24/United Kingdom(Great Britain).png' %}"
                            alt="Canticorum English"/></a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home-it">
                        <!-- presentazone IT -->
                        <p class="home_presentation"> {{ content|safe }}</p>
                        <!-- /presentazone -->
                    </div>
                    <div class="tab-pane fade" id="home-en">
                        <p class="home_presentation">
                            {% if contentLang %}
                                {% if contentLang.is_visible %}
                                    {{ contentLang.body|safe }}
                                {% endif %}
                            {% endif %}</p>
                    </div>
                </div>
            </div>
        </div>
        {% if events %}
            <div class="span6">
                <!-- eventi -->
                <div class="concert-home"><h4>Prossimi concerti</h4></div>
                <ul class="media-list">
                    {% for evt in  events %}
                        <li class="media event-separator">
                            <div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery"
                                 class="pull-left">
                                {% if evt.locandina %}
                                    {% thumbnail evt.locandina "145x208" crop="center" as im %}
                                        <a class="pull-left" href="{{ evt.locandina.url }}" data-gallery="gallery"><img
                                                class="media-object event" src="{{ im.url }}" width="{{ im.width }}"
                                                height="{{ im.height }}"/></a>
                                    {% endthumbnail %}
                                {% else %}
                                    <a class="pull-left"><img class="media-object event" style="height:48px;width:48px;"
                                                              height="48" width="48"
                                                              src="/static/website/img/canticorum-logo_48.jpg"/></a>
                                {% endif %}
                            </div>

                            <div class="media-body">
                                <h4 class="media-heading"><a>{{ evt.titolo }}</a></h4>
                                <p>
                                    {% if evt.da_definire %}
                                        <strong> </strong>
                                    {% else %}
                                        <strong>{{ evt.evt_date|date:"l d F Y" }}, ore
                                            {{ evt.evt_date|date:"H:i" }}</strong>
                                    {% endif %}
                                </p>
                                <p><strong>{{ evt.luogo }}</strong></p>
                                <p>{{ evt.descrizione|safe }}</p>
                                {% if evt.programma_sala %}
                                    <p class="pull-right"><a class="btn btn-success" target="_blank"
                                                             href="{{ evt.programma_sala.url }}"><i
                                            class="icon-download icon-white"></i> PROGRAMMA DI SALA</a></p>
                                {% endif %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                <!-- /eventi -->
            </div>
        {% endif %}

    </div>
    <!-- FACEBOOK -->
    <div class="row margin-top-30">
        <div class="span3"><a href="https://www.facebook.com/CoroCantiCorum" target="_blank">
            <button class="btn btn-block btn-facebook"><i class="fa fa-facebook"></i> {% trans 'Seguici su' %} Facebook
            </button>
        </a>
        </div>
        <div class="span3"><a href="https://www.instagram.com/corocanticorum/" target="_blank">
            <button class="btn btn-block btn-instagram"><i class="fa fa-instagram"></i> {% trans 'Seguici su' %} Instagram
            </button>
        </a></div>
        <div class="span3"><a href="https://twitter.com/canticorum2015" target="_blank">
            <button class="btn btn-block btn-twitter"><i class="fa fa-twitter"></i> {% trans 'Seguici su' %} Twitter
            </button>
        </a></div>
        <div class="span3"><a href="https://www.youtube.com/user/CantiCorum2" target="_blank">
            <button class="btn btn-block btn-youtube"><i class="fa fa-youtube"></i> {% trans 'Seguici su' %} YouTube
            </button>
        </a></div>
    </div>

{% endblock main %}



{% block extrabody %}
    <script src="{% static 'reserved/js/load-image.js' %}"></script>
    <script src="{% static 'reserved/js/bootstrap-image-gallery.min.js' %}"></script>

    {% include "reserved/snippet_modal_gallery.html" %}

    <script type="application/javascript">
        $(function () {
            $('#myTab a').click(function (e) {
                $(this).tab('show');
            });
            //carosello
            $('.carousel').carousel({
                interval: 8000
            });
        });

    </script>

{% endblock extrabody %}