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

{% block title %}Color Range | {{ parent() }}{% endblock %}

{% block body %}
    <h1>Luxury Pools Color Finish</h1>
    <div class="row">
        <div class="col">
            <p><img src="{{ asset('images/color-closeup-med.jpg') }}" class="img-fluid" style="float:right;">All of our pools feature our famous Sparkle Shimmer Finish gelcoat. The gelcoat is the top layer of your pool that gives it 'WOW' factor. Available in several colors, all of our pool finishes have millions of multi-color sparkle flakes that shimmer and shine in the sunshine like diamonds.</p>
            <div class="col col-sm-4 float-left">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tnpI_h2A_1I?rel=0"></iframe>
                </div>
            </div>
            <p>In addition to driving the beauty and WOW of your pool, our high quality gelcoats also provide you a layer of protection from algae, dirt, and staining.</p>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="col-xs-4 text-center mx-auto">
            <h3>Ocean Shimmer</h3>
            <img class="img-fluid" id="ocean" src="{{ asset('images/ocean-shimmer.jpg') }}">
        </div>
        <div class="col-xs-4 text-center mx-auto">
            <h3>California Shimmer</h3>
            <img class="img-fluid" id="california" src="{{ asset('images/california-shimmer.jpg') }}">
        </div>
        <div class="col-xs-4 text-center mx-auto">
            <h3>Aquamarine Shimmer</h3>
            <img class="img-fluid" id="aquamarine" src="{{ asset('images/aquamarine-shimmer.jpg') }}">
        </div>
        <div class="col-xs-4 text-center mx-auto">
            <h3>Sandstone Shimmer</h3>
            <img class="img-fluid" id="sandstone" src="{{ asset('images/sandstone-shimmer.jpg') }}">
        </div>
        <div class="col-xs-4 text-center mx-auto">
            <h3>Midnight Shimmer</h3>
            <img class="img-fluid" id="midnight" src="{{ asset('images/midnight-shimmer.jpg') }}">
        </div>
        <div class="col-xs-4 text-center mx-auto">
            <h3>Evening Sky Shimmer</h3>
            <img class="img-fluid" id="evening-sky" src="{{ asset('images/evening-sky.jpg') }}">
        </div>
    </div>
    <div class="row">
        <div class="col mx-auto">
            <h3>Hover over colors above to change this pool's color.</h3>
        </div>
        <div class="col mx-auto">
            <img class="img-fluid" id="poolcolor" src="{{ asset('images/ocean-shimmer-pool.jpg') }}">
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(function () {

            $("#ocean").mouseover(function () {
                $("#poolcolor").attr("src", "images/ocean-shimmer-pool.jpg");
            });

            $("#california").mouseover(function () {
                $("#poolcolor").attr("src", "images/california-shimmer-pool.jpg");
            });

            $("#aquamarine").mouseover(function () {
                $("#poolcolor").attr("src", "images/aquamarine-shimmer-pool.jpg");
            });

            $("#sandstone").mouseover(function () {
                $("#poolcolor").attr("src", "images/sandstone-shimmer-pool.jpg");
            });

            $("#midnight").mouseover(function () {
                $("#poolcolor").attr("src", "images/midnight-shimmer-pool.jpg");
            });

            $("#evening-sky").mouseover(function () {
                $("#poolcolor").attr("src", "images/evening-sky-shimmer-pool.jpg");
            });

        });
    </script>
{% endblock %}