{% load i18n %}
{% load static %}

{% load generic_photos_tags %}

{% block javascript %}
    <script type="text/javascript" src="{% static 'photos/packages/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'photos/packages/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css' %}" media="screen" />
    <script type="text/javascript">
        $(function() {
            $('.gallery a').lightBox();
        });
    </script>
{% endblock %}

<div class="block">
  <h3>{% trans 'Photos' %}</h3>
   <div class="content">
    {% if object|get_photos_for_object %}
    <div>
        <table style='margin: auto;'>
            <tbody>
                <tr style="vertical-align: top;">
                {% for photo in object|get_photos_for_object %}
                    <td>
                        <div class="gallery">
                            <a href="{{ photo.get_display_url }}" title="{{ photo.title }}">
                                <img src="{{ photo.get_thumbnail_url }}" alt='thumbnail' />
                                {% if photo.title %}
                                    <div id='caption' class='tc'>
                                       {{ photo.title }}
                                    </div>
                                {% endif %}
                            </a>
                        </div>
                    </td>

                    {% if forloop.counter|divisibleby:"3" %}
                    </tr><tr>
                    {% endif %}
                {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>
    {% else %}

    <p style='text-align:center;'>
    {% if title %}
        {% blocktrans %}There are no {{ title }} {% endblocktrans %}
    {% else %}
        {% trans 'There are no photos' %}
    {% endif %}
    </p>

    {% endif %}
    </div>
</div>

