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

{% set seo_entity = page %}
{% set body_class = 'my-swatches' %}

{% block content %}
    <div class="container">
        <div class="action-header my-swatches-header">
            <div class="action-header-flourish">
                {% include '_includes/flourish.html.twig' %}
            </div>
            <h1 class="action-header-title">{{ page.title }}</h1>
            {% if mySwatches.swatches is not empty %}
                <div class="action-header-actions">
                    <a href="{{ path('my_swatches_print') }}" 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>
            {% endif %}
        </div>

        <div class="my-swatches-content">
            {{ page.mySwatchesContent|raw }}
        </div>

        <div class="my-swatches-block">
            <div class="gallery-empty"{% if mySwatches.swatches|length != 0 %} style="display: none"{% endif %}>
                <div class="my-swatches-video">
                    <div class="row">
                        <div class="col col-lg-8" data-component="fitvids">
                            {% if is_texstyle_au() %}
                                <iframe src="https://player.vimeo.com/video/253899672" width="640" height="360" frameborder="0"></iframe>
                            {% else %}
                                <iframe src="https://www.youtube.com/embed/QpJiwk4YhA0" width="560" height="315" frameborder="0"></iframe>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="my-swatches-swatches-btn">
                    <a href="{{ path('collections_index') }}" class="btn btn-primary">Browse fabric collections</a>
                </div>
            </div>
            <div class="gallery-count"{% if mySwatches.swatches|length == 0 %} style="display: none"{% endif %}>
                <div class="my-swatches-swatches">
                    <div class="gallery is-wide" data-component="gallery" data-gallery='{"remove_unliked": true}'>
                        {% for swatch in mySwatches.swatches %}
                            <div class="gallery-column">
                                {% include '_includes/gallery-item.html.twig' with {'show_collection': true} %}
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="my-swatches-swatches-btn">
                    <a href="{{ path('my_swatches_clear') }}" class="btn btn-primary">Remove all swatches</a>
                    <a href="{{ path('collections_index') }}" class="btn btn-primary">Browse fabric collections</a>
                </div>
            </div>
        </div>

        <div class="my-swatches-header">
            <div class="action-header-flourish">
                {% include '_includes/flourish.html.twig' %}
            </div>
            <h2 class="h1">{{ page.swatchGalleriesTitle }}</h2>
        </div>

        <div class="my-swatches-content">
            {{ page.swatchGalleriesContent|raw }}
        </div>

        <div class="my-swatches-galleries">
            {{ render(controller('Texstyle\\Controller\\SwatchGalleriesController::moreGalleries')) }}
        </div>

        <div class="my-swatches-galleries-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 My Swatch Gallery', 'action': path('my_swatches_email')} %}
{% endblock %}