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

{% set seo_entity = gallery %}
{% set body_class = 'swatch-gallery' %}

{% block content %}
    <div class="container">
        <div class="swatch-gallery-header">
            {% include '_includes/flourish.html.twig' %}

            <div class="action-header-actions">
                <a href="{{ path('swatch_galleries_print', {'urlTitle': gallery.urlTitle}) }}" target="_blank" class="action-header-actions-item">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 58" width="25" height="23" role="presentation">
                        <use xlink:href="{{ asset('assets/images/sprite.svg') }}#icon-print"></use>
                    </svg>
                    Print
                </a>
                <a href="javascript:void(0)" class="action-header-actions-item" data-toggle="modal" data-target="#emailModal">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 46" width="25" height="18" role="presentation">
                        <use xlink:href="{{ asset('assets/images/sprite.svg') }}#icon-send"></use>
                    </svg>
                    Email
                </a>
            </div>
        </div>

        <div class="breadcrumbs">
            <div class="breadcrumbs-item">
                <a href="{{ path('swatch_galleries_index') }}" class="breadcrumbs-link">Inspiration Gallery</a>
            </div>
        </div>

        {% if gallery.wideImage %}
            <h1 class="swatch-gallery-title">{{ gallery.title }}</h1>
            <div class="swatch-gallery-image hidden-md-up">
                <img src="{{ gallery.heroImage }}" width="767" height="430" alt="{{ gallery.title }} Texstyle">
            </div>
            <div class="swatch-gallery-content-wide">
                {{ gallery.content|raw }}
            </div>
            <div class="swatch-gallery-image hidden-sm-down">
                <img src="{{ gallery.heroImage }}" width="1110" height="622" alt="{{ gallery.title }} Texstyle">
            </div>
        {% else %}
            <div class="row">
                <div class="col-md-6 hidden-sm-down flex-md-last">
                    <div class="swatch-gallery-image">
                        <img src="{{ gallery.heroImage }}" width="767" height="430" alt="{{ gallery.title }} Texstyle">
                    </div>
                </div>
                <div class="col-md-6">
                    <h1 class="swatch-gallery-title">{{ gallery.title }}</h1>
                    <div class="swatch-gallery-image hidden-md-up">
                        <img src="{{ gallery.heroImage }}" width="767" height="430" alt="{{ gallery.title }} Texstyle">
                    </div>
                    <div class="swatch-gallery-content">
                        {{ gallery.content|raw }}
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="swatch-gallery-gallery">
            <div class="gallery is-wide" data-component="gallery" data-gallery='{"remove_unliked": true}'>
                {% for swatch in gallery.orderedSwatches %}
                    <div class="gallery-column">
                        {% include '_includes/gallery-item.html.twig' with {'show_collection': true} %}
                    </div>
                {% endfor %}
            </div>
        </div>

        <h2 class="h1">More Inspiration</h2>

        <div class="swatch-gallery-more">
            {{ render(controller('Texstyle\\Controller\\SwatchGalleriesController::moreGalleries')) }}
        </div>

        <div class="swatch-gallery-more-btn">
            <a href="{{ path('swatch_galleries_index') }}" class="btn btn-primary btn-more">View all inspiration galleries</a>
        </div>
    </div>
{% endblock %}

{% block callouts %}
    {% include '_includes/help-callout.html.twig' %}
    {% include '_includes/email-modal.html.twig' with {'title': 'Email ' ~ gallery.title ~ ' Gallery', 'action': path('swatch_galleries_email', {'urlTitle': gallery.urlTitle})} %}
{% endblock %}