{% extends '@nucleus/partials/particle.html.twig' %}

{% do gantry.load('lightcase.init') %}

{% block particle %}

    {% if particle.title %}<h2 class="g-title">{{ particle.title|raw }}</h2>{% endif %}

    <div class="g-imagegrid {{ particle.class|e }}">

        {% if particle.desc %}<div class="g-imagegrid-desc">{{ particle.desc|raw }}</div>{% endif %}

        <div class="g-imagegrid-wrapper {{ particle.cols|e }} {{ particle.layout }}">
            {% for imagegriditem in particle.imagegriditems %}
                <div class="g-imagegrid-item">
                    <a class="g-imagegrid-link" href="{{ url(imagegriditem.image)|e }}" data-rel="lightcase{% if particle.album %}:{{ particle.album }}{% endif %}">
                        {% if particle.layout == 'g-imagegrid-captions' %}
                        {% endif %}
                        <img src="{{ url(imagegriditem.image)|e }}" alt="{{ imagegriditem.caption|e }}" />
                        <div class="indicator">
                            <div>
                                {% if particle.layout == 'g-imagegrid-standard' %}
                                    {{ imagegriditem.caption }}
                                {% else %}
                                    <div class="g-imagegrid-caption">
                                        {{ imagegriditem.caption }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}

        </div>
    </div>

{% endblock %}