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

{% set seo_entity = collection %}
{% set body_class = 'collection has-banner' %}
{% set site_header_white = collection.lightHeader %}

{% block content %}
    <div class="banner banner-sm" style="background-image: url('{{ collection.bannerImage }}')">
        <div class="container">
            <div class="banner-inner">
                <h1 class="banner-title">{{ collection.title }}</h1>
                {% if collection.collectionStyles|length > 1 %}
                    <div class="banner-subtitle">
                        {% for style in collection.collectionStyles %}
                            {{ style.shortTitle }}{% if not loop.last %} |{% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="collection-content">
                    {{ collection.content|raw }}
                </div>

                <h2 class="collection-title" id="gallery">Gallery</h2>

                {% for group in collection.swatchGroups() %}
                    <h3 class="collection-gallery-title">{{ group.title }}</h3>

                    <div class="gallery collection-gallery" data-component="gallery">
                        {% for swatch in collection.swatchesBySwatchGroup(group) %}
                            <div class="gallery-column">
                                {% include '_includes/gallery-item.html.twig' %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}

                <div class="action-header" id="specifications">
                    <h2 class="h1 action-header-title">Specifications</h2>
                    <div class="action-header-actions">
                        <a href="{{ path('collections_print', {'urlTitle': collection.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="collection-specs-wrapper" data-component="tabs">
                    <div class="tabs" role="tablist">
                        {% for style in collection.collectionStyles %}
                            <a href="#content-{{ loop.index }}" id="tab-{{ loop.index }}" class="tabs-link{% if loop.first %} active{% endif %}" aria-controls="content-{{ loop.index }}" role="tab">{{ style.title }}</a>
                        {% endfor %}
                    </div>

                    <div class="tabs-content">
                        {% for style in collection.collectionStyles %}
                            <div id="content-{{ loop.index }}" class="tabs-panel{% if loop.first %} active{% endif %}" aria-labelledby="tab-{{ loop.index }}" role="tabpanel">
                                <div class="collection-specs">
                                    {% for spec in style.specifications %}
                                        <div class="collection-specs-row">
                                            <div class="collection-specs-row-title">{{ spec.title }}</div>
                                            <div class="collection-specs-row-content">{{ spec.content|raw }}</div>
                                        </div>
                                    {% endfor %}

                                    {% if style.applications is not empty %}
                                        <div class="collection-specs-row has-divider is-horizontal">
                                            <div class="collection-specs-row-title">Applications</div>
                                            <div class="collection-specs-row-content">
                                                <div class="collection-applications">
                                                    {% for application in style.applications %}
                                                        <div class="collection-applications-item collection-applications-item-{{ application.urlTitle }}">
                                                            <svg xmlns="http://www.w3.org/2000/svg" {% if application.urlTitle == 'vertical-bo' %}width="94" height="65" {% elseif application.urlTitle == 'zip-systems' %}width="60" height="50" {% else %}width="50" height="50"{% endif %} aria-label="{{ application.title }}" role="img">
                                                                <use xlink:href="{{ asset('assets/images/sprite.svg') }}#icon-{{ application.urlTitle }}"></use>
                                                            </svg>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if style.features is not empty %}
                                        <div class="collection-specs-row has-divider is-horizontal">
                                            <div class="collection-specs-row-title">Features</div>
                                            <div class="collection-specs-row-content">
                                                <div class="collection-features">
                                                    {% for feature in style.features %}
                                                        <div class="collection-features-item{% if feature.urlTitle == 'kleenscreen' %} is-wide{% endif %}">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="{{ feature.urlTitle == 'kleenscreen' ? '70' : '55' }}" height="70" aria-label="{{ feature.title }}" role="img">
                                                                <use xlink:href="{{ asset('assets/images/sprite.svg') }}#icon-{{ feature.urlTitle }}"></use>
                                                            </svg>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}

                                    {% if style.certifications is not empty %}
                                        <div class="collection-specs-row has-divider is-horizontal">
                                            <div class="collection-specs-row-title">Certifications</div>
                                            <div class="collection-specs-row-content">
                                                <div class="collection-certifications">
                                                    {% for certification in style.certifications %}
                                                        <div class="collection-certifications-item{% if certification.wide %} is-wide{% endif %}">
                                                            <img src="{{ certification.image }}" width="{{ certification.wide ? '128' : '64' }}" height="64" alt="{{ certification.title }}">
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                {% if collection.downloads is not empty %}
                    {% if is_texstyle_au() %}
                        <h2 class="collection-title" id="downloads">Downloads</h2>
                    {% else %}
                        <h2 class="collection-title" id="resources">Resources</h2>
                    {% endif %}

                    <div class="downloads collection-downloads">
                        {% for download in collection.downloads %}
                            <div class="downloads-row">
                                <div class="downloads-row-content">
                                    <div class="downloads-row-content-title">{{ download.title }}</div>
                                    {% if download.description %}
                                        <div class="downloads-row-content-excerpt">{{ download.description|raw }}</div>
                                    {% endif %}
                                </div>
                                <div class="downloads-row-button">
                                    {% if download.downloadFile %}
                                        <a href="{{ download.downloadFile }}" target="_blank" class="btn btn-primary btn-sm">Download</a>
                                    {% elseif download.downloadUrl %}
                                        <a href="{{ download.downloadUrl }}" target="_blank" class="btn btn-primary btn-sm">View</a>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {% if collection.exploreMore is not empty %}
                    <h2 class="collection-title">Explore More Collections</h2>

                    <div class="collections">
                        {% for more in collection.exploreMore|slice(0, 3) %}
                            <div class="col-6 col-sm-4">
                                <a href="{{ path('collections_show', {'urlTitle': more.collection.urlTitle}) }}" class="collections-item">
                                    {% if more.collection.tag %}
                                        <div class="collections-item-status">{{ more.collection.tag }}</div>
                                    {% endif %}
                                    <div class="collections-item-image">
                                        <img src="{{ more.collection.gridImage }}" width="354" height="354" alt="{{ more.collection.title }} Texstyle">
                                    </div>
                                    <div class="collections-item-title">{{ more.collection.title }}</div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
            <div class="col-lg-3 flex-lg-first hidden-md-down">
                {% for category in categories %}
                    <div class="sidebar-block">
                        <div class="sidebar-title sidebar-title-short">{{ category.title }}</div>
                        <nav class="sidebar-nav">
                            {% for item in category.collections %}
                                <div class="sidebar-nav-item{% if item.urlTitle == collection.urlTitle %} active{% endif %}">
                                    <a href="{{ path('collections_show', {'urlTitle': item.urlTitle}) }}" class="sidebar-nav-link">
                                        <span>{{ item.title }}</span>
                                        {% if item.tag %}
                                            <span class="sidebar-nav-tag">{{ item.tag }}</span>
                                        {% endif %}
                                    </a>
                                </div>
                            {% endfor %}
                        </nav>
                    </div>
                {% endfor %}

                <a href="{{ path('my_swatches_index') }}" class="sidebar-callout sidebar-callout-short">
                    <div class="sidebar-callout-title">Create and share your own library of fabrics with &lsquo;My Swatches&rsquo;.</div>
                    <div class="sidebar-callout-more">Find out more</div>
                </a>
            </div>
        </div>
    </div>
{% endblock %}

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