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

{% block title %}{{ poolModel.name }} Pool Model | {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/jquery.fancybox.css') }}">
{% endblock %}

{% block body %}
    <div class="row">
        <div class="d-none d-md-block col-md-3">
            {% for model in poolModels %}
                <h3 class="pb-2">
                    <a href="{{ path('poolModel', {'slug' : model.slug}) }}">
                        <img src="{{ asset('images/models/'~model.slug~'-small.jpg') }}">
                        {{ model.name }}
                    </a>
                </h3>
            {% endfor %}
        </div>
        <div class="col-12 col-sm-9 text-center">
            <img src="{{ asset('images/models/'~poolModel.slug~'-name-img.jpg') }}" class="img-fluid">
            <p>{{ poolModel.description }}</p>
            {% if poolModel.slug != 'outback' %}
                <img src="{{ asset('images/models/'~poolModel.slug~'-main-img.jpg') }}" class="img-fluid" style="margin:0 auto;">
            {% endif %}
            <div class="row">
                <div class="col-12 col-sm-6">
                    <img src="{{ asset('images/models/'~poolModel.slug~'-diag-img.jpg') }}" class="img-fluid" style="margin:15px auto 0;">
                </div>
                <div class="col-12 col-sm-6 text-center">
                    <h3 style="font-weight:900;"><u>- Features & Benefits -</u></h3>
                    <ul class="text-left">
                        {{ poolModel.featuresAndBenefits|raw }}
                    </ul>
                    <img src="{{ asset('images/models/'~poolModel.slug~'-sizes-img.jpg') }}" class="img-fluid" style="margin:0 auto;">
                </div>
            </div>
            <h3 class="text-center"><a href="{{ asset('images/models/'~poolModel.slug~'.pdf') }}" target="_blank"><span class="fas fa-print"></span> Print A {{ poolModel.name }} Pool Brochure <span class="fas fa-print"></span></a></h3>
            {{ poolModel.additionalContent|raw }}
            {% if poolModel.poolProjectGalleries|length > 0 %}
                <h3 class="text-center">{{ poolModel.name }} Galleries</h3>
                <h6 class="text-center">click on a thumbnail to see that projects gallery</h6>
                <div class="row">
                    {% set galleryCount = 1 %}
                    {% for gallery in poolModel.poolProjectGalleries %}
                        <div class='col-6 col-md-4'>
                            <a class='fancybox' rel='group{{ galleryCount }}' data-fancybox-type='image' href='{{ asset('images/galleries/'~gallery.slug~'/lg/'~gallery.slug~'-'~gallery.suffix~'-pool-'~gallery.mainImage~'.jpg') }}'>
                                <img src='{{ asset('images/galleries/'~gallery.slug~'/sm/'~gallery.slug~'-'~gallery.suffix~'-pool-'~gallery.mainImage~'.jpg') }}' class='img-fluid' style='margin:10px auto 0;'>
                            </a>
                        </div>
                        <div style='display:none;'>
                            {% for x in 1..gallery.numberOfPhotos %}
                                {% if x < 10 %}
                                    {% set imageNumber = '0'~x %}
                                {% else %}
                                    {% set imageNumber = x %}
                                {% endif %}
                                <a class='fancybox' rel='group{{ galleryCount }}' data-fancybox-type='image' href='{{ asset('images/galleries/'~gallery.slug~'/lg/'~gallery.slug~'-'~gallery.suffix~'-pool-'~imageNumber~'.jpg') }}'></a>
                            {% endfor %}
                        </div>
                        {% set galleryCount = galleryCount + 1 %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

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