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

{% block title %}{{ project.title }} | {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/jquery.fancybox.css') }}">
    <style>
        .featurewrap {
            text-align: center;
        }

        .tallest {
            margin-top: 10px;
            position: relative;
        }

        .fancybox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .projectimage {
            margin: 0 auto;
        }

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

            .tallest {
                height: 151px;
            }

        {{ render(controller(
        'App\\Controller\\PhotoGalleryController::renderProjectCSSText',
        { 'poolProjectGallery': project, 'size': 'xs' }
        )) }}

        }

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

        }

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

            .tallest {
                height: 226px;
            }

        {{ render(controller(
        'App\\Controller\\PhotoGalleryController::renderProjectCSSText',
        { 'poolProjectGallery': project, 'size': 'sm' }
        )) }}

        }

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

            .tallest {
                height: 301px;
            }

        {{ render(controller(
        'App\\Controller\\PhotoGalleryController::renderProjectCSSText',
        { 'poolProjectGallery': project, 'size': 'md' }
        )) }}

        }

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

        }

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

        }
    </style>
{% endblock %}

{% block body %}
    {# TODO: add ImageGallery schema code back in here #}
    <h1>{{ project.title }}</h1>
    <div class="row featurewrap">
        {% set loopLength = project.numberOfPhotos %}
        {% for x in 1..loopLength %}
            {% if x < 10 %}
                {% set imageNumber = '0'~x %}
            {% else %}
                {% set imageNumber = x %}
            {% endif %}
            <div class="col-6 col-lg-4 tallest">
                <a href="{{ asset('images/galleries/'~project.slug~'/lg/'~project.slug~'-'~project.suffix~'-pool-'~imageNumber~'.jpg') }}" class="fancybox" rel="group1" data-fancybox-type='image'>
                    <div class="projectimage imagenumber{{ imageNumber }}"></div>
                </a>
            </div>
        {% endfor %}
    </div>
{% endblock %}

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