{% comment %}
SàT website: Salut à Toi's presentation website
Copyright (C) 2012  Jérôme Poisson (goffi@goffi.org)

This file is part of SàT website.

SàT website is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Foobar is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Foobar.  If not, see <http://www.gnu.org/licenses/>.
{% endcomment %}

{% load i18n %}
{% load staticfiles %}
{% load utils %}

<div id="carousel-screenshots" class="carousel slide" data-ride="carousel" data-interval="0">
    {% if screenshots|length > 9 %}
        <ol class="carousel-indicators">
            {% for row in screenshots|buffer:9 %}
                <li data-target="#carousel-screenshots" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
            {% endfor %}
        </ol>
    {% endif %}
    <div class="carousel-inner" role="listbox">
        {% for row in screenshots|buffer:9 %}
            <div class="item{% if not forloop.counter0 %} active{% endif %}">
            {% for screenshot in row %}
                <div class="col-md-4">
                    {% if screenshot.poster %}
	                    <video index="{{ forloop.counter0 }}" class="thumbnail img-responsive" width="640" height="400" poster="{% static screenshot.poster %}" controls="controls" src="{% static screenshot.path %}" preload="none">
	                    {% blocktrans with firefox="<a href=\"http://www.mozilla-europe.org/fr/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}{% endblocktrans %}
	                    </video>
                    {% else %}
                        <img index="{{ forloop.counter0 }}" class="thumbnail img-responsive" src="{% static screenshot.path %}">
                    {% endif %}
                </div>
            {% endfor %}
            </div>
        {% endfor %}
        {% if screenshots|length > 9 %}
	        <a class="left carousel-control" href="#carousel-screenshots" role="button" data-slide="prev">
	          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	          <span class="sr-only">Previous</span>
	        </a>
	        <a class="right carousel-control" href="#carousel-screenshots" role="button" data-slide="next">
	          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	          <span class="sr-only">Next</span>
	        </a>
        {% endif %}
    </div>
</div>

<div class="modal" id="modal-screenshots" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div id="carousel-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0">
                    {% if screenshots|length > 1 %}
                        <ol class="carousel-indicators">
                            {% for screenshot in screenshots %}
                                <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                    <div class="carousel-inner" role="listbox">
                        {% for screenshot in screenshots %}
                            <div class="item{% if not forloop.counter0 %} active{% endif %}">
                                {% if screenshot.poster %}
	                                <video class="img-responsive" width="640" height="400" poster="{% static screenshot.poster %}" controls="controls" src="{% static screenshot.path %}" preload="none">
	                                {% blocktrans with firefox="<a href=\"http://www.mozilla-europe.org/fr/\">Firefox</a>" %}Your browser doesn't manage the « video » tag, you should update, e.g. with the last {{ firefox }}{% endblocktrans %}
	                                </video>
                                {% else %}
                                    <img class="img-responsive" src="{% static screenshot.path %}">                            
                                {% endif %}
                                <div class="carousel-caption">
                                    {{ screenshot.description }}
                                    {% if screenshot.lang and screenshot.subtitles %}
                                        ({% trans "language:" %} {{ screenshot.lang }},
                                         {% trans "subtitles:" %} {{ screenshot.subtitles }})
                                    {% elif screenshot.lang %}
                                        ({% trans "language:" %} {{ screenshot.lang }})
                                    {% elif screenshot.subtitles %}
                                        ({% trans "subtitles:" %} {{ screenshot.subtitles }})
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    {% if screenshots|length > 1 %}
	                    <a class="left carousel-control" href="#carousel-screenshots-modal" data-slide="prev">
	                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	                        <span class="sr-only">Previous</span>
	                    </a>
	                    <a class="right carousel-control" href="#carousel-screenshots-modal" data-slide="next">
	                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	                        <span class="sr-only">Next</span>
	                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>