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

{% block title %}Fiberglass Pool Photo Gallery | {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>

        .featurewrap {
            text-align: center;
            margin-top: 10px;
        }

        .projectimage {
            margin: 0 auto;
        }

        .galleryThumbnails {
            display: none;
        }

        /* smallest */
        @media (min-width: 0px) {

            .projectimage {
                width: 151px;
                height: 100px;
            }

        {{ render(controller(
        'App\\Controller\\PhotoGalleryController::renderCSSText',
        { 'projects': projects, 'size': 'xs' }
        )) }}
        }

        /* xsmall */
        @media (min-width: 320px) {

        }

        /* phone */
        @media (min-width: 480px) {

            .projectimage {
                width: 226px;
                height: 150px;
            }

        {{ render(controller(
        'App\\Controller\\PhotoGalleryController::renderCSSText',
        { 'projects': projects, 'size': 'sm' }
        )) }}
        }

        /* tablet */
        @media (min-width: 768px) {

            .projectimage {
                width: 301px;
                height: 200px;
            }

        {{ render(controller(
        'App\\Controller\\PhotoGalleryController::renderCSSText',
        { 'projects': projects, 'size': 'md' }
        )) }}
        }

        /* desktop */
        @media (min-width: 992px) {

        }

        /* wide */
        @media (min-width: 1200px) {

            .galleryThumbnails {
                display: inline-flex;
            }

        }

    </style>
{% endblock %}

{% block body %}
    <div class="row featurewrap">
        {% for project in projects %}
            {# TODO: add ImageGallery schema code back in here #}
            <div class="col-6 col-lg-4">
                <a href="{{ path('fiberglassPoolProjectPhotos', {'slug': project.slug}) }}">
                    <div class="projectimage {{ project.slug }}"></div>
                    <div class="row galleryThumbnails m-2">
                        <div class="col-3">
                            <img
                                    class="img-fluid"
                                    src="{{ asset('images/galleries/'~project.slug~'/xs/'~project.slug~'-'~project.suffix~'-pool-'~project.thumb1~'.jpg') }}"
                            >
                        </div>
                        <div class="col-3">
                            <img
                                    class="img-fluid"
                                    src="{{ asset('images/galleries/'~project.slug~'/xs/'~project.slug~'-'~project.suffix~'-pool-'~project.thumb2~'.jpg') }}"
                            >
                        </div>
                        <div class="col-3">
                            <img
                                    class="img-fluid"
                                    src="{{ asset('images/galleries/'~project.slug~'/xs/'~project.slug~'-'~project.suffix~'-pool-'~project.thumb3~'.jpg') }}"
                            >
                        </div>
                        <div class="col-3">
                            <img
                                    class="img-fluid"
                                    src="{{ asset('images/galleries/'~project.slug~'/xs/'~project.slug~'-'~project.suffix~'-pool-'~project.thumb4~'.jpg') }}"
                            >
                        </div>
                    </div>
                    <h3>{{ project.title }}</h3>
                </a>
            </div>
        {% endfor %}
    </div>
{% endblock %}