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

{% block title %}Pool Equipment | {{ 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;
            }

        {% for x in 1..14 %}
        {% if x < 10 %}
        {% set imageNumber = '0'~x %}
        {% else %}
        {% set imageNumber = x %}
        {% endif %}
        {% set imagePath = 'images/equipment/xs/'~imageNumber~'.jpg' %}
        {% set imageSize = imagePath|getImageWidthAndHeight %}
            .imagenumber{{ imageNumber }} {
                background-image: url({{ asset(imagePath) }});
                width: {{ imageSize.width }}px;
                height: {{ imageSize.height }}px;
            }

        {% endfor %}

        }

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

        }

        /* phone */
        @media (min-width: 480px) {
            .tallest {
                height: 226px;
            }

        {% for x in 1..14 %}
        {% if x < 10 %}
        {% set imageNumber = '0'~x %}
        {% else %}
        {% set imageNumber = x %}
        {% endif %}
        {% set imagePath = 'images/equipment/sm/'~imageNumber~'.jpg' %}
        {% set imageSize = imagePath|getImageWidthAndHeight %}
            .imagenumber{{ imageNumber }} {
                background-image: url({{ asset(imagePath) }});
                width: {{ imageSize.width }}px;
                height: {{ imageSize.height }}px;
            }

        {% endfor %}
        }

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

            .tallest {
                height: 301px;
            }

        {% for x in 1..14 %}
        {% if x < 10 %}
        {% set imageNumber = '0'~x %}
        {% else %}
        {% set imageNumber = x %}
        {% endif %}
        {% set imagePath = 'images/equipment/md/'~imageNumber~'.jpg' %}
        {% set imageSize = imagePath|getImageWidthAndHeight %}
            .imagenumber{{ imageNumber }} {
                background-image: url({{ asset(imagePath) }});
                width: {{ imageSize.width }}px;
                height: {{ imageSize.height }}px;
            }

        {% endfor %}
        }

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

        }

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

        }

    </style>
{% endblock %}

{% block body %}
    <h1>Pool Equipment</h1>
    <div class="row featurewrap">
        {% for x in 1..14 %}
            {% if x < 10 %}
                {% set imageNumber = '0'~x %}
            {% else %}
                {% set imageNumber = x %}
            {% endif %}
            <div class="col-6 col-lg-4 tallest">
                <a class='fancybox' rel='group1' href='{{ asset('images/equipment/lg/'~imageNumber~'.jpg') }}' 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 %}