{% extends 'layouts/_frontend.twig' %}

{% block main %}

    {% set entries = craft.entries().section('work').limit(10) %}
    {% paginate entries as pageInfo, pageEntries %}

    {% for work in pageEntries %}
        <div data-image="{{ loop.index }}" class="projectImage fixed w-full h-full" style="display: none;">
            <div class="bgOverlay w-full h-screen bg-black absolute"></div>
            {% if work.globalImage | length %}
                {% set img = work.globalImage.one().optimisedImage %}
                <img class="lazyload absolute object-cover w-full h-full opacity-75"
                     src="{{ img.placeholderBox() }}"
                     data-srcset="{{ img.srcset() }}"
                     sizes="100vw" />
            {% endif %}
        </div>
    {% endfor %}

<div class="flex flex-col xl:flex-row h-auto xl:h-screen relative onLoadFadeIn" style="display: none;">
    {% include '_partials/_blackSidebar.twig' with {'pageTitle': 'WORK', 'category': 'servicesCategories',  'newcategory': 'sectorCategories', 'section': 'work'} %}
    <div class="w-full xl:w-2/3 cursor-black relative text-black overflow-y-scroll contentArea">

        <div class="h-auto flex flex-row xl:hidden items-center mb-8 px-8 xl:px-16 pt-8 xl:pt-16">
            <div class="w-1/2">
                <a href="/">
                    <img src="/assets/img/vertical-logo-black.svg" style="width: 33px;" alt="New Word Order">
                </a>
            </div>
            <div class="w-1/2 text-right">
                <div class="flex flex-row items-center justify-end h-auto space-x-2">
                    <a href="#" class="openMenu font-opensans font-medium uppercase mb-0">Menu</a>
                </div>
            </div>
        </div>

        <div class="px-8 xl:px-16">
            <div class="grid grid-cols-1 xl:grid-cols-2 mt-16">
                <div class="richText">
                    <p style="text-indent: 40px;">
                        {{ workPage.introduction }}
                    </p>
                </div>
            </div>

            {# END DESKTOP PROJECTS #}
            <div class="hidden xl:block projects mt-16 mb-16 hover:text-white transition duration-500 ease-in-out">
                {% for work in pageEntries %}
                    <div class="project {% if not loop.first %}pt-14{% endif %} pb-12 border-black border-opacity-10 border-b" data-project="{{ loop.index }}">
                        <a href="{{ work.url }}" class="customCursor">
                            <p class="uppercase font-black font-opensans font-semibold">{{ work.title }}</p>
                            <h2 class="text-4xl xl:text-6xl uppercase" style="line-height: 0.85;">
                                {{ work.headline }}
                            </h2>
                        </a>
                    </div>
                {% endfor %}
            </div>
            {# END PROJECTS #}

            {# MOBILE PROJECTS #}
            <div class="block xl:hidden mt-16 mb-16">
                {% for work in pageEntries %}
                    <div class="{% if not loop.first %}pt-14{% endif %} pb-12 border-black border-opacity-10 border-b" data-project="{{ loop.index }}">
                        <a href="{{ work.url }}">
                            <p class="uppercase font-black font-opensans font-semibold">{{ work.title }}</p>
                            <h2 class="text-4xl xl:text-6xl uppercase" style="line-height: 0.85;">
                                {{ work.headline }}
                            </h2>
                            {% if work.globalImage | length %}
                                {% set img = work.globalImage.one().optimisedImage %}
                                <div class="aspect-w-16 aspect-h-9 mt-4 mb-6">
                                    <img class="lazyload absolute object-cover w-full h-full"
                                         src="{{ img.placeholderBox() }}"
                                         data-srcset="{{ img.srcset() }}"
                                         sizes="100vw" />
                                </div>
                            {% endif %}
                        </a>
                    </div>
                {% endfor %}
            </div>

            <div class="w-full relative h-40">
                {% if pageInfo.prevUrl %}<a class="absolute left-0 p-4 border rounded-full hover:bg-red hover:text-white transition duration-500 ease-in-out" href="{{ pageInfo.prevUrl }}">Previous page</a>{% endif %}
                {% if pageInfo.nextUrl %}<a class="absolute right-0 p-4 border rounded-full hover:bg-red hover:text-white transition duration-500 ease-in-out" href="{{ pageInfo.nextUrl }}">More projects</a>{% endif %}
            </div>
        </div> {# END PADDED CONTAINER #}

        <div class="footer transition duration-500 ease-in-out bg-black relative h-full text-white flex flex-col">
            {% include '_partials/footer.twig' %}
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    jQuery(document).ready(function($){

        var projectCursor = $('.projectCursor');


        $('.project').hover(function () {
            $('.mainMenu').toggleClass('lightMode');
            $('.contentArea').toggleClass('lightMode');
            $('.footer').stop().toggleClass('bg-opacity-20');
            $('.projectImage[data-image=' + $(this).data('project') + ']').stop().fadeToggle('slow');
            $('.headerImg').toggleClass('opacity-0');
        });

        $('.customCursor').mousemove(function (e) {
            projectCursor.css({
                top: e.clientY - projectCursor.height() / 2,
                left: e.clientX - projectCursor.width() / 2
            });
        });
        $('.customCursor').mouseleave(function () {
            projectCursor.css({opacity: 0});
        });
        $('.customCursor').mouseenter(function () {
            projectCursor.css({opacity: 1});
        });
    });
</script>
{% endblock %}