{% use "utils.twig" %}
{% extends "core.twig" %}

{% block content %}

<style type="text/css">

.gallery-filter {
    text-align: right;
}
    
.gallery-filter .vis-icon {
    display: inline-block;
    margin-left: 5px;
}

.gallery-filter .vis-icon svg,
.gallery-filter .vis-icon img {
    width: 64px;
    height: 64px;
}

.gallery-filter .vis-icon.inactive svg { opacity: 0.8; }
.gallery-filter .vis-icon.inactive:hover svg { opacity: 1; }

.gallery-filter .vis-icon.inactive svg path,
.gallery-filter .vis-icon.inactive svg rect,
.gallery-filter .vis-icon.inactive svg circle {
    fill: #96A7AF;
}
.gallery-filter .vis-icon.inactive svg line {
    stroke: #96A7AF;
}

.gallery-filter .vis-icon.active svg path,
.gallery-filter .vis-icon.active svg rect,
.gallery-filter .vis-icon.active svg circle {
    fill: #0682BD;
}
.gallery-filter .vis-icon.active svg line {
    stroke: #0682BD;
}

</style>

<div class="docs">
    <div class="pull-right" style="position:relative;top:-16px">
        {{ block('pagination') }}
    </div>
    <h1 class="title">{% trans "Chart Gallery" %}</h1>
</div>


<div class="row" style="margin-bottom:30px;">
    <div class="span4">
        
        <!-- <h3>{% trans "See what others created with Datawrapper recently" %}</h3> -->
        <p>{% trans "Welcome to the public gallery of Datawrapper charts. Here you can see the nice charts that other users have created recently. Click on the charts to see the interactive version." %}</p>

    </div>

    <div class="span8">

        <div class="gallery-filter">
        {% for vis in byvis %}
            {% if key == 'vis' and val == vis.id %}
                <a class="vis-icon active" href="/gallery/">{{ vis.icon | raw }}</a>
            {% else %}
                <a class="vis-icon inactive" href="/gallery/by/vis/{{ vis.id }}">{{ vis.icon | raw }}</a>
            {% endif %}
        {% endfor %}
            
        </div>

    </div>
</div>

<div class="row">
    <div class="span12 gallery">
        <div class="thumbnails">
            {% set gallerythumb_url = '' %}
            {% for chart in charts %}
            {{ block('gallerythumb') }}
            {% endfor %}
        </div>
    </div>

    <div class="pull-right">
        {{ block('pagination') }}
    </div>

</div>


<script type="text/javascript" src="/static/vendor/overlay/ender.overlay.js"></script>
<script type="text/javascript">
dw.backend.ready(function(){

    require(['masonry', 'imagesloaded'], function(Masonry, imagesLoaded) {
        var imgLoad = imagesLoaded('.thumbnails');
        imgLoad.on('progress', _.debounce(layout, 200));
        imgLoad.on('always', layout);
        function layout() {
            setTimeout(function() {
                new Masonry('.thumbnails', {
                    itemSelector: '.chart',
                    transitionDuration: 0
                });
            }, 100);
        }
    });


    if (location.hash.length == 7) {
        // try to find the chart
        dw.backend.popupChart(location.hash.substr(2));
    }

    $(window).bind('hashchange', function() {
        if (location.hash.length == 7) {
            dw.backend.popupChart(location.hash.substr(2));
        }
    });

});

</script>

{{ parent() }}
{% endblock %}