{# @var craft \craft\web\twig\variables\CraftVariable #}
{# @var market \angellco\market\web\twig\MarketVariable #}

{# TODO: permissions #}
{% set currentVendor = market.vendors.getCurrentVendor() %}
{% if not currentVendor %}
    {% redirect url('market/login') %}
{% endif %}

{% set profilePicture = currentVendor.getProfilePicture() %}
{% set extendHeader = extendHeader ?? false %}

{% include '_market/_layouts/_top.html' %}

<div x-data="{ sidebarOpen: false }" class="h-screen flex overflow-hidden bg-gray-100">
    {# Off-canvas menu for mobile, show/hide based on off-canvas menu state. #}
    <div x-cloak class="md:hidden">
        <div x-show="sidebarOpen" class="fixed inset-0 flex z-60">

            {# Overlay #}
            <div x-show="sidebarOpen"
                 x-transition:enter="transition-opacity ease-linear duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity ease-linear duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0"
                 aria-hidden="true"
            >
                <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
            </div>

            {# Menu #}
            <div x-show="sidebarOpen"
                 x-transition:enter="transition ease-in-out duration-300 transform"
                 x-transition:enter-start="-translate-x-full"
                 x-transition:enter-end="translate-x-0"
                 x-transition:leave="transition ease-in-out duration-300 transform"
                 x-transition:leave-start="translate-x-0"
                 x-transition:leave-end="-translate-x-full"
                 class="relative flex-1 flex flex-col max-w-xs w-full pb-4 bg-brand-500"
            >
                <div class="absolute top-0 right-0 -mr-12 pt-3">
                    <button x-show="sidebarOpen"
                            x-transition:enter="transition-opacity ease-linear duration-300"
                            x-transition:enter-start="opacity-0"
                            x-transition:enter-end="opacity-100"
                            x-transition:leave="transition-opacity ease-linear duration-300"
                            x-transition:leave-start="opacity-100"
                            x-transition:leave-end="opacity-0"
                            x-on:click="sidebarOpen = false"
                            type="button"
                            class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                    >
                        <span class="sr-only">Close sidebar</span>
                        {# Heroicon name: x #}
                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>

                {# TODO: fix this to center #}
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ url('market') }}"
                       class="flex items-center flex-grow justify-between h-16 py-2 px-4 text-brand-100 font-bold text-xl uppercase"
                    >
                        {% include '_market/_layouts/_logo.html' %}
                    </a>
                </div>
                <nav class="mt-5 flex-1 h-0 divide-y divide-brand-600 overflow-y-auto">
                    <div class="px-2 space-y-1">
                        {% include '_market/_layouts/_nav-links.html' with {
                            mobile: true
                        } %}
                    </div>

                    <div class="mt-6 pt-6">
                        <div class="px-2 space-y-1">
                            {% include '_market/_layouts/_nav-links-bottom.html' with {
                                mobile: true
                            } %}
                        </div>
                    </div>
                </nav>
            </div>
            <div class="flex-shrink-0 w-14" aria-hidden="true">
                {# Dummy element to force sidebar to shrink to fit close icon #}
            </div>
        </div>
    </div>

    {# Static sidebar for desktop #}
    <div class="hidden bg-brand-500 md:flex md:flex-shrink-0">
        <div class="flex flex-col w-64">
            <div class="flex flex-col flex-grow pb-4 overflow-y-auto">
                <a href="{{ url('market') }}"
                   class="flex items-center flex-shrink-0 h-16 py-2 px-4 text-brand-100 font-bold text-xl uppercase"
                >
                    {% include '_market/_layouts/_logo.html' %}
                </a>
                <nav class="mt-4 flex-1 flex flex-col divide-y divide-brand-600 overflow-y-auto" aria-label="Sidebar">
                    <div class="px-2 space-y-1">
                        {% include '_market/_layouts/_nav-links.html' %}
                    </div>

                    <div class="mt-6 pt-6">
                        <div class="px-2 space-y-1">
                            {% include '_market/_layouts/_nav-links-bottom.html' %}
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div class="flex flex-col w-0 flex-1 overflow-hidden">

        {# Fixed header bar #}
        <div class="relative z-50 flex-shrink-0 flex h-16 bg-white {{ extendHeader ? 'border-b' : 'shadow' }}">

            {# Sidebar burger button #}
            <button x-on:click="sidebarOpen = true"
                    type="button"
                    class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500 md:hidden"
            >
                <span class="sr-only">Open sidebar</span>
                {# Heroicon name: menu-alt-2 #}
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                     stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"/>
                </svg>
            </button>

            {# Breadcrumbs #}
            <div class="flex-1 px-4 flex justify-between">

                {% if breadcrumbs is defined %}
                    <nav class="flex-1 flex" aria-label="Breadcrumb">
                        <ol class="flex items-center space-x-4">
                            <li>
                                <div>
                                    <a href="{{ url('market') }}" class="text-gray-400 hover:text-gray-500">
                                        {# Heroicon name: home #}
                                        <svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
                                        </svg>
                                        <span class="sr-only">Home</span>
                                    </a>
                                </div>
                            </li>

                            {% for crumb in breadcrumbs %}
                                {# Only output more than one on larger screens #}

                                <li{% if not loop.first %} class="hidden sm:block"{% endif %}>
                                    <div class="max-w-64 overflow-hidden flex items-center">
                                        {# Heroicon name: chevron-right #}
                                        <svg class="flex-shrink-0 h-5 w-5 text-gray-400"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                             aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                  clip-rule="evenodd"/>
                                        </svg>

                                        <a href="{{ crumb.url }}" {% if loop.last %}aria-current="page"{% endif %}
                                           class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 truncate"
                                        >
                                            {{ crumb.label }}
                                        </a>
                                    </div>
                                </li>
                            {% endfor %}
                        </ol>
                    </nav>
                {% else %}
                    <div class="flex-1 flex"></div>
                {% endif %}

                {# Right hand side of fixed header #}
                <div class="ml-4 flex items-center md:ml-6">

                    {# Profile dropdown #}
                    <div class="ml-3 relative"
                         x-data="{ open: false }"
                         x-on:keydown.window.escape="open = false"
                         x-on:click.away="open = false"
                    >
                        <div>
                            <button x-on:click="open = !open"
                                    class="max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50"
                                    id="user-menu" aria-haspopup="true" x-bind:aria-expanded="open"
                            >
                                {% if profilePicture %}
                                    <img class="h-8 w-8 rounded-full"
                                         src="{{ profilePicture.url({width:256, height: 256}) }}" alt="">
                                {% else %}
                                    <svg class="h-8 w-8 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                {% endif %}
                                <span class="hidden ml-3 text-gray-700 text-sm font-medium lg:block">
                                    <span class="sr-only">Open user menu for </span>
                                    {{ currentUser.name }}
                                </span>
                                {# Heroicon name: chevron-down #}
                                <svg class="hidden flex-shrink-0 ml-1 h-5 w-5 text-gray-400 lg:block"
                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                     aria-hidden="true">
                                    <path fill-rule="evenodd"
                                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                          clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        </div>
                        <div x-show="open"
                             x-cloak
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100"
                             role="menu" aria-orientation="vertical" aria-labelledby="user-menu"
                        >
                            <div class="px-4 py-3">
                                <p class="text-sm">
                                    {{ 'Signed in as'|t('market') }}
                                </p>
                                <p class="text-sm font-medium text-gray-900 truncate">
                                    {{ currentVendor.title }}
                                </p>
                            </div>
                            <div class="py-1">
                                <a href="{{ currentVendor.url }}" target="_blank"
                                   class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                                   role="menuitem"
                                >
                                    {# Heroicon name: solid/external-link #}
                                    <svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
                                        <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
                                    </svg>
                                    {{ 'View shop'|t('market') }}
                                </a>

                                <a href="{{ url('market/shop-front') }}"
                                   class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                                   role="menuitem"
                                >
                                    {# Heroicon name: solid/office-building #}
                                    <svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd" />
                                    </svg>
                                    {{ 'Edit shop front'|t('market') }}
                                </a>

                                <a href="{{ url('market/settings') }}"
                                   class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                                   role="menuitem"
                                >
                                    {# Heroicon name: solid/cog #}
                                    <svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
                                    </svg>
                                    {{ 'Settings'|t('market') }}
                                </a>
                            </div>
                            {% if currentVendor.holidayMode %}
                            <div class="py-1">
                                <a href="{{ url('market/settings/holiday') }}"
                                   class="group flex items-center px-4 py-2 text-sm text-action-700 hover:bg-action-100 hover:text-action-900"
                                   role="menuitem"
                                >
                                    {# Heroicon name: solid/sun #}
                                    <svg class="mr-3 h-5 w-5 text-action-400 group-hover:text-action-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ 'Holiday mode active'|t('market') }}
                                </a>

                            </div>
                            {% endif %}

                            {# TODO: training #}
{#                            <div class="py-1">#}
{#                                <a href="{{ url('market/training') }}"#}
{#                                   class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"#}
{#                                   role="menuitem"#}
{#                                >#}
{#                                    #}{# Heroicon name: solid/academic-cap #}
{#                                    <svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">#}
{#                                        <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />#}
{#                                    </svg>#}
{#                                    Training Portal#}
{#                                </a>#}
{#                            </div>#}

                            <div class="py-1">
                                <a href="{{ url('logout') }}"
                                   class="group flex items-center px-4 py-2 text-sm text-red-700 hover:bg-red-100 hover:text-red-900"
                                   role="menuitem"
                                >
                                    {# Heroicon name: solid/logout #}
                                    <svg class="mr-3 h-5 w-5 text-red-400 group-hover:text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd" />
                                    </svg>
                                    {{ 'Sign out'|t('market') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Main content area #}
        <main class="flex-1 relative overflow-y-auto focus:outline-none" tabindex="0">
            {% include '_market/_layouts/_flashes.html' %}

            {% block content %}
                <div class="py-4 sm:py-6 md:py-8">
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
                        {% block header %}
                            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">{{ title }}</h1>
                        {% endblock %}
                    </div>
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
                        {% block main %}{% endblock %}
                    </div>
                </div>
            {% endblock %}
        </main>
    </div>
</div>

{% include '_market/_layouts/_bottom.html' %}