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

{% block main %}

    <div class="flex flex-col xl:flex-row h-auto xl:h-screen relative onLoadFadeIn" style="display: none;">
        <div class="w-full xl:w-1/3 bg-white cursor-white p-8 xl:p-16 flex flex-col text-black mainMenu relative">
            <div class="h-auto flex flex-row items-center xl:items-start mb-8 xl:mb-0">
                <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="mt-auto w-full xl:w-3/4">
                <div>
                    <p class="font-opensans text-base uppercase inline-block font-medium mb-8" style="line-height: 0.9;">
                        {{ entry.title }}
                    </p>
                    <h3 class="mb-4">{{ entry.headline }}</h3>
                    <p class="font-opensans font-light mb-8">
                        {{ entry.story | nl2br }}
                    </p>
                </div>
                <div class="grid grid-cols-1">
                    <div class="text-xs font-light font-opensans">
                        {% set categories = craft.categories().relatedTo(entry).all() %}
                        {% for category in categories %}
                            <a class="border inline-block hover:bg-red hover:border-red hover:text-white transition duration-500 ease-in-out" href="{{ category.url }}?section=work" style="padding:2px 4px;margin-left: 2px;margin-bottom: 4px;">{{ category.title }}</a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full xl:w-2/3 cursor-black relative text-black overflow-hidden xl:overflow-y-scroll contentArea">
            <div class="">

                {% if entry.flexibleLayout is defined %}
                    {{ entry.flexibleLayout | raw }}
                {% endif %}

            </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($){

            $('.onLoadFadeIn').fadeIn();

            $('.videoPlayerTrigger').on('click', function(e){
                e.preventDefault();
                $(this).parents('.videoContainer').next().fadeIn();
            });
            $('.closeVideo').on('click', function(){
                $(this).parent().fadeOut();
            });

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