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

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

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/jquery.fancybox.css') }}">
    <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', 'type' : 'installations' }
        )) }}
        }

        /* 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', 'type' : 'installations' }
        )) }}
        }

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

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

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

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

        }

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

            .galleryThumbnails {
                display: inline-flex;
            }

        }

    </style>
{% endblock %}

{% block body %}
    <h1>Fiberglass pool installation is easier than you might think.</h1>
    <p>Even though the whole project can be completed within a week, it still constitutes major construction. To give you a feel of the process follow the installations below, pictures speak a thousand words. If you have questions or would like to contact a Luxury Pools and Living representative please call <a href="tel:6148907665">614-890-POOL</a> or <a href="quote-request.php"{# TODO: replace with real path #}>send an inquiry</a> we'd love to hear from you.</p>
    <div class="row featurewrap">
        {% for project in projects %}
            {# TODO: add ImageGallery schema code back in here #}
            <div class="col-6 col-lg-4">
                <a class='fancybox' rel='group{{ project.group }}' href="{{ asset('images/installations/'~project.slug~'/lg/'~project.image~'.jpg') }}">
                    <div class="projectimage {{ project.slug }}"></div>
                    <h3>{{ project.title }}</h3>
                </a>
            </div>
            <div style="display:none;">
                {% set loopLength = project.image %}
                {% for x in 1..loopLength %}
                    {% if x < 10 %}
                        {% set imageNumber = '0'~x %}
                    {% else %}
                        {% set imageNumber = x %}
                    {% endif %}
                    <a class='fancybox' rel='group{{ project.group }}' href="{{ asset('images/installations/'~project.slug~'/lg/'~imageNumber~'.jpg') }}"></a>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
    <div class="row justify-content-center">
        <div class="col col-md-6">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rubkr7FoA9Y?rel=0"></iframe>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col col-md-6">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RFsrc3dqZxk?rel=0"></iframe>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/jquery.fancybox.pack.js') }}"></script>
    <script>
        $(document).ready(function () {
            $(".fancybox").fancybox();
        });
    </script>
{% endblock %}