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

{% block body %}
    {% if not isXmlHttpRequest %}
        {% set album = sets[0].album %}
        <script type='text/javascript'>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            (function() {
                var gads = document.createElement('script');
                gads.async = true;
                gads.type = 'text/javascript';
                var useSSL = 'https:' == document.location.protocol;
                gads.src = (useSSL ? 'https:' : 'http:') +
                    '//www.googletagservices.com/tag/js/gpt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(gads, node);
            })();
        </script>

        <div class="container-xl" id="galleriescontainer">
            {{ ads.printAd('mobile', 'pageTop')|raw }}

            <select class="select-album-m">
                {% for album in albums %}
                    <option value="{{ album.id }}">{{ album.name|raw }}</option>
                {% endfor %}
            </select>
            <div class="galleries-wrapper">
                <div id="listgalleries">
                    <div id="fixedContainer">
                        <div class="searchContainer" style="display: none;">
                            <input class="searchbox" id="legendSearch" type="text" placeholder="legend">
                            <input class="searchbut" type="button" value="">
                        </div>
                        <label>{{ 'Albums'|trans }}</label>
                        <ul class="albums nav nav-tabs" role="tablist">
                            {% for i,album in albums %}
                                {% if i %}
                                    <li data-id="{{ album.id }}" class="album">
                                {% else %}
                                    <li data-id="{{ album.id }}" class="album active">
                                {% endif %}
                                <a class="showPictures" href="#album{{ album.id }}" >{{ album.name|raw }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div id="gallerybody">
                <div id="gallerydata" data-index="0" data-type="gallery" data-offset="20" data-album="{{ album.id }}">
                    <div id="ajaxWrapper" data-spinner="{{ 'Loading'|trans }}">
                        <ul class="pictureContainer">
                            {% if album is defined %}
                                {{ ads.printAd('desktop', 'albumsPictures')|raw }}
                                <div id="album{{ album.id }}" class='newalbum'>{{ album.name|raw }}</div>
                            {% endif %}

    {% else %} {# if isXmlHttpRequest #}
        {% if search is not defined or not search %}
            {% for set in sets %}
                {% if set.newAlbum %}
                    <div id="album{{ album.id }}" class="newalbum">{{ album.name|raw }}</div>
                {% endif %}
            {% endfor %}
            <input type='hidden' id='albumId' value='{{ rAlbumId }}'>
            <input type='hidden' id='offset' value='{{ newOffset }}'>
        {% endif %}
    {% endif %}

    {% if ad is defined %}
        <div id='' style='text-align:center'>
            <script type='text/javascript'>
                googletag.cmd.push(function() { googletag.display(''); });
            </script>
        </div>
    {% endif %}

    {% for set in sets %}
        {% set pictures = set.pictures %}
        {% if pictures %}
            {{ include('gallery/pictures.html.twig') }}
        {% else %}
            <div class="empty">{{ 'Empty Search'|trans }}</div>
        {% endif %}
    {% endfor %}

    {% if not isXmlHttpRequest %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock %}