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

{% block title %}{{ poolStyle.name }} Pool Style | {{ 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 style in poolStyles %}
                <h3 class="pb-2">
                    <a href="{{ path('poolStyle', {'slug' : style.slug}) }}">
                        <img src="{{ asset('images/models/'~style.slug~'-style-small.jpg') }}">
                        {{ style.name }}
                    </a>
                </h3>
            {% endfor %}
        </div>
        <div class="col-12 col-md-9">
            <h1>{{ poolStyle.name }} Pool Styles</h1>
            <div class="row">
                {% for pool in poolStyle.poolModels %}
                    <div class='col-12 col-md-4' style='height:300px;margin-bottom:30px;'>
                        <a href='{{ path('poolModel', { 'slug' : pool.slug }) }}'>
                            <img src='{{ asset('images/models/'~pool.slug~'-style-img.jpg') }}' class='img-fluid' style='margin:0 auto;'>
                        </a>
                    </div>
                {% endfor %}
                {% for fancybox in styleFancyboxes[poolStyle.slug] %}
                    <div class='col-12 col-md-4' style='height:300px;margin-bottom:30px;'>
                        <a class='fancybox' rel='group1' href='{{ asset('images/models/'~fancybox~'-style-img-large.jpg') }}'>
                            <img src='{{ asset('images/models/'~fancybox~'-style-img.jpg') }}' class='img-fluid' style='margin:0 auto;'>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}

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