{% extends "layouts/_admin.twig" %}

{% requireLogin %}

{% block main %}

    <div>
        <div class="bg-black w-full py-6 px-8 flex flex-row justify-between items-center sticky top-0 z-50">
            <img src="/assets/img/logo-full-white.svg" alt="New Word Order">
            <div class="flex flex-row text-white items-center">
                {% set company = currentUser.company.one() %}
                <div class="flex flex-row space-x-2 items-center">
                    <i class="fal fa-user-circle text-2xl"></i>
                    <p class="mb-0 font-opensans font-light">{{ currentUser.name }}</p>
                    <p class="mb-0 font-opensans font-bold text-white opacity-30">{{ company.title }}</p>
                </div>
                <a class="ml-4 mb-0 uppercase font-black text-sm pt-3 pb-2 px-4 border leading-none hover:bg-white hover:cursor hover:bg-opacity-30 transition duration-500 ease-in-out" href="/logout">
                    Log out
                </a>
            </div>
        </div>
        <div class="flex flex-row h-screen relative">

            <div class="hidden xl:block relative w-1/4 bg-black bg-opacity-80">

            </div>

            <div class="w-full xl:w-3/4 p-8 xl:p-32">
                <div class="max-w-7xl mx-auto text-center xl:text-left pb-16">
                    <div>
                        <h1 class="mb-8 uppercase font-bold text-red">Brand audit</h1>
                    </div>

                    {% set audits = craft.entries().section('audits').authorId(currentUser.id).all() %}
                    {% if audits | length %}
                        <h4 class="mb-2">Brand audit submissions for {{ currentUser.name }}</h4>
                        <hr class="mb-8">
                        {% for audit in audits %}
                            <a class="flex flex-row items-center justify-between" style="cursor: pointer;" href="{{ audit.url }}">
                                <div>{{ audit.title }}</div>
                                <div class="bg-green text-white py-2 px-4 rounded hover:bg-red transition duration-500 ease-in-out">Edit your submission</div>
                            </a>
                        {% endfor %}
                    {% else %}
                        <div class="w-3/4 p-8 mx-auto">
                            <!-- This example requires Tailwind CSS v2.0+ -->
                            <div class="bg-white shadow sm:rounded-lg">
                                <div class="px-4 py-5 sm:p-6">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                                        Complete a brand audit
                                    </h3>
                                    <div class="mt-2 max-w-xl text-sm text-gray-500">
                                        <p>
                                            Create a brand audit. You can save your work and pick up where you left off.
                                        </p>
                                    </div>
                                    <div class="mt-5">
                                        <a style="cursor: pointer;" href="/brandaudit/form" class="inline-flex text-white items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md bg-green">
                                            Start a brand audit
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}