{% extends "_market/_layouts/main" %}

{% set title = 'Dashboard'|t('market') %}

{% set extendHeader = true %}

{% set statusMap = {
    green: 'bg-green-100 text-green-800',
    blue: 'bg-blue-100 text-blue-800',
    pink: 'bg-pink-100 text-pink-800',
    default: 'bg-gray-100 text-gray-800',
} %}

{% block content %}
    {# Basic order query #}
    {% set ordersQuery = craft.orders
        .isCompleted(true)
        .relatedTo({
            'targetElement': currentVendor,
            'field': 'vendor'
        })
    %}

    {# Total orders calc #}
    {% set thirtyDays = now|date_modify('-30 days')|date('U') %}
    {% set sixtyDays = now|date_modify('-60 days')|date('U') %}

    {% set totalOrders = ordersQuery
        .dateOrdered('>= '~thirtyDays)
        .count()
    %}

    {% set totalOrdersPrev30 = ordersQuery
        .dateOrdered(['and', '>= '~sixtyDays, '<= '~thirtyDays])
        .count()
    %}

    {% set totalOrdersDiff = (totalOrders - totalOrdersPrev30) %}

    {# Total new orders #}
    {% set totalNewOrders = ordersQuery
        .orderStatus('new')
        .dateOrdered(null)
        .count()
    %}

    {# Main orders loop #}
    {% set recentOrders = ordersQuery
        .withCustomer(true)
        .withAddresses(true)
        .orderStatus(null)
        .dateOrdered(null)
        .orderBy('dateOrdered desc')
        .limit(6)
        .all()
    %}

    {# Total revenue calc #}
    {% set last30DaysPrices = ordersQuery
        .limit(null)
        .dateOrdered('>= '~thirtyDays)
        .addSelect('commerce_orders.totalPrice')
        .column()
    %}

    {% set prev30DaysPrices = ordersQuery
        .limit(null)
        .dateOrdered(['and', '>= '~sixtyDays, '<= '~thirtyDays])
        .addSelect('commerce_orders.totalPrice')
        .column()
    %}

    {% set totalRevenue = 0 %}
    {% for price in last30DaysPrices %}
        {% set totalRevenue = totalRevenue + price %}
    {% endfor %}

    {% set totalRevenuePrev30 = 0 %}
    {% for price in prev30DaysPrices %}
        {% set totalRevenuePrev30 = totalRevenuePrev30 + price %}
    {% endfor %}

    {% set totalRevenueDiff = (totalRevenue - totalRevenuePrev30) %}

    {# Header #}
    <div class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
            <div class="py-6 md:flex md:items-center md:justify-between">
                <div class="flex-1 min-w-0">
                    {# Profile #}
                    <div class="flex items-center">
                        {% if profilePicture %}
                            <img class="hidden h-16 w-16 rounded-full sm:block" src="{{ profilePicture.url({width:256, height: 256}) }}" alt="">
                        {% endif %}
                        <div>
                            <div class="flex items-center">
                                {% if profilePicture %}
                                    <img class="h-16 w-16 rounded-full sm:hidden" src="{{ profilePicture.url({width:256, height: 256}) }}" alt="">
                                {% endif %}
                                <h1 class="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:leading-9 sm:truncate">
                                    {% set hour = now|date('G') %}
                                    {% if hour < 12 %}
                                        Good morning, {{ currentUser.friendlyName }}
                                    {% elseif hour < 17 %}
                                        Good afternoon, {{ currentUser.friendlyName }}
                                    {% else %}
                                        Good evening, {{ currentUser.friendlyName }}
                                    {% endif %}
                                </h1>
                            </div>
                            <dl class="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
                                <dt class="sr-only">Company</dt>
                                <dd class="flex items-center text-sm text-gray-500 font-medium capitalize sm:mr-6">
                                    {# Heroicon name: office-building #}
                                    <svg class="flex-shrink-0 mr-1.5 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="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>
                                    {{ currentVendor.title }}
                                </dd>
                                <dt class="sr-only">Account status</dt>
                                <dd class="mt-3 flex items-center text-sm text-gray-500 font-medium sm:mr-6 sm:mt-0 capitalize">
                                    {% if currentVendor.status == 'active' %}
                                        {# Heroicon name: circle-check #}
                                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                        </svg>
                                    {% endif %}

                                    {% if currentVendor.status == 'pending' %}
                                        {# Heroicon name: clock #}
                                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-orange-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                                        </svg>
                                    {% endif %}

                                    {% if currentVendor.status == 'suspended' %}
                                        {# Heroicon name: exclamation #}
                                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                    {% endif %}
                                    {{ 'Account {status}'|t('market', {status: currentVendor.status}) }}
                                </dd>
                                <dt class="sr-only">Account status</dt>
                                <dd class="mt-3 flex items-center text-sm text-gray-500 font-medium sm:mr-6 sm:mt-0 capitalize">
                                    {% if currentVendor.stripeUserId %}
                                        {# Heroicon name: circle-check #}
                                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                        </svg>
                                        {{ 'Payments Active' }}
                                    {% else %}
                                        {# Heroicon name: exclamation #}
                                        <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                        {{ 'Payments Inactive' }}
                                    {% endif %}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="mt-6 flex space-x-3 md:mt-0 md:ml-4">

                    {# If stripe is not connected, help them #}
                    {% if not currentVendor.stripeUserId %}
                        <a href="{{ url('market/settings/payments') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-action-600 hover:bg-action-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500">
                            {{ 'Setup Payments'|t('market') }}
                        </a>
                    {% else %}

                        {# New product #}
                        <div class="relative inline-block text-left"
                             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="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-action-600 hover:bg-action-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-action-500"
                                        id="new-product-menu" aria-haspopup="true" x-bind:aria-expanded="true"
                                >
                                    {# Heroicon name: plus #}
                                    <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                                    </svg>
                                    {{ 'Create new product'|t('market') }}
                                </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 py-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
                                 role="menu" aria-orientation="vertical" aria-labelledby="new-product-menu"
                            >
                                {% for productType in craft.commerce.productTypes.getEditableProductTypes() %}
                                    <a href="{{ url('market/products/'~productType.handle~'/new') }}" class="group flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
                                        {{ productType.name }}
                                    </a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>

    {# Main #}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
        <div class="pt-6">

            <h2 class="text-lg leading-6 font-medium text-gray-900">{{ 'Overview'|t('market') }}</h2>
            <div class="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">

                {# Total New Orders #}
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-brand-500 rounded-md p-3">
                                {# Heroicon name: sparkles #}
                                <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {{ 'New Orders'|t('market') }}
                                </dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900">
                                        {{ totalNewOrders }}
                                    </div>
                                </dd>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="text-sm">
                            <a href="{{ url('market/orders', {status: 'new'}) }}" class="font-medium text-action-700 hover:text-action-900">
                                {{ 'View all'|t('market') }}
                            </a>
                        </div>
                    </div>
                </div>

                {# Total Orders #}
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-brand-500 rounded-md p-3">
                                {# Heroicon name: clipboard-list #}
                                <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                </svg>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {{ 'Total Orders'|t('market') }}
                                </dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900">
                                        {{ totalOrders }}
                                    </div>

                                    {% if totalOrdersDiff > 0 %}
                                        <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                            <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                            </svg>
                                            <span class="sr-only">{{ 'Increased by'|t('market') }}</span>
                                            {{ totalOrdersDiff|abs }}
                                        </div>
                                    {% elseif totalOrdersDiff < 0 %}
                                        <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                                            <svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                            </svg>
                                            <span class="sr-only">{{ 'Decreased by'|t('market') }}</span>
                                            {{ totalOrdersDiff|abs }}
                                        </div>
                                    {% endif %}
                                </dd>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="flex items-center">
                            <a href="{{ url('market/orders') }}" class="flex-1 text-sm font-medium text-action-700 hover:text-action-900">
                                {{ 'View all'|t('market') }}
                            </a>
                            <span class="flex-1 text-right text-gray-400 font-medium text-xs uppercase">{{ 'Last 30 days'|t('market') }}</span>
                        </div>
                    </div>
                </div>

                {# Total Revenue #}
                <div class="sm:col-span-2 lg:col-span-1 bg-white overflow-hidden shadow rounded-lg">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-brand-500 rounded-md p-3">
                                {# Heroicon name: credit-card #}
                                <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                </svg>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {{ 'Total Revenue'|t('market') }}
                                </dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900">
                                        {{ totalRevenue|currency(null, [], [], true) }}
                                    </div>

                                    {% if totalRevenueDiff > 0 %}
                                        <div class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
                                            <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                                            </svg>
                                            <span class="sr-only">{{ 'Increased by'|t('market') }}</span>
                                            {{ totalRevenueDiff|abs|currency(null, [], [], true) }}
                                        </div>
                                    {% elseif totalRevenueDiff < 0 %}
                                        <div class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
                                            <svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                            </svg>
                                            <span class="sr-only">{{ 'Decreased by'|t('market') }}</span>
                                            {{ totalRevenueDiff|abs|currency(null, [], [], true) }}
                                        </div>
                                    {% endif %}
                                </dd>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-5 py-3">
                        <div class="flex items-center">
                            <a href="{{ url('market/orders') }}" class="flex-1 text-sm font-medium text-action-700 hover:text-action-900">
                                {{ 'View all'|t('market') }}
                            </a>
                            <span class="flex-1 text-right text-gray-400 font-medium text-xs uppercase">{{ 'Last 30 days'|t('market') }}</span>
                        </div>
                    </div>
                </div>

            </div>

            {% if recentOrders %}
                <h2 class="mt-8 text-lg leading-6 font-medium text-gray-900">
                    {{ 'Recent orders'|t('market') }}
                </h2>

                {# Smallest breakpoint only #}
                <div class="sm:hidden bg-white overflow-hidden shadow rounded-lg mt-2">
                    <ul class="divide-y divide-gray-200 overflow-hidden shadow sm:hidden">
                        {% for order in recentOrders %}
                            {% set billingAddress = order.billingAddress %}
                            <li>
                                <a href="{{ url('market/orders/'~order.id) }}" class="block px-4 py-4 bg-white hover:bg-gray-50">
                                    <span class="flex items-center space-x-4">
                                        <span class="flex-1 flex space-x-2 truncate">
                                            <span class="flex flex-col text-gray-500 text-sm truncate">
                                                <span>#{{ order.reference }}</span>
                                                <span class="truncate">
                                                    <span class="text-gray-900 font-medium">{{ order.storedTotalPrice|currency(order.currency, [], [], true) }}</span>
                                                    {% if billingAddress %}
                                                        from {{ billingAddress.firstName }} {{ billingAddress.lastName }}
                                                    {% endif %}
                                                </span>
                                                <span>{{ order.dateOrdered|datetime('short') }}</span>
                                            </span>
                                        </span>
                                        {# 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>
                                    </span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="bg-gray-50 px-5 py-3 border-t">
                        <div class="text-sm">
                            <a href="{{ url('market/orders') }}" class="font-medium text-action-700 hover:text-action-900">
                                {{ 'View all'|t('market') }}
                            </a>
                        </div>
                    </div>
                </div>

                {# Small breakpoint and up #}
                <div class="hidden sm:block">
                    <div class="flex flex-col mt-2">
                        <div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-lg">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ 'Reference'|t('market') }}
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ 'Customer'|t('market') }}
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ 'Status'|t('market') }}
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ 'Amount'|t('market') }}
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            {{ 'Date'|t('market') }}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                {% for order in recentOrders %}
                                    {% set billingAddress = order.billingAddress %}
                                    <tr>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="{{ url('market/orders/'~order.id) }}" class="text-action-600 hover:text-action-900">{{ order.reference }}</a>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">
                                                {% if billingAddress %}
                                                    {{ billingAddress.firstName }} {{ billingAddress.lastName }}
                                                {% endif %}
                                            </div>
                                            <a href="mailto:{{ order.email }}" class="text-sm text-gray-500 hover:underline">{{ order.email }}</a>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ statusMap[order.orderStatus.color] is defined ? statusMap[order.orderStatus.color] : statusMap.default }}">
                                                {{ order.orderStatus }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ order.storedTotalPrice|currency(order.currency, [], [], true) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ order.dateOrdered|datetime('short') }}
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                            <div class="bg-gray-50 px-5 py-3 border-t">
                                <div class="text-sm">
                                    <a href="{{ url('market/orders') }}" class="font-medium text-action-700 hover:text-action-900">
                                        {{ 'View all'|t('market') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {# Training portal ad #}
            <div class="relative py-16">
                <div class="bg-gradient-to-r from-brand-800 to-brandsecondary-700 lg:bg-none hidden">{# TODO: training - remove hidden #}
                    <div class="lg:grid lg:grid-cols-12">

                        {# Image #}
                        <div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
                            <div class="absolute inset-x-0 h-1/2 bg-gray-100 lg:hidden" aria-hidden="true"></div>
                            <div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
                                <div class="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
                                    <img class="object-cover object-center rounded-3xl shadow-2xl" src="https://images.unsplash.com/photo-1507207611509-ec012433ff52?ixlib=rb-1.2.1&ixqx=gZ0vPUcSyh&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80" alt="">
                                </div>
                            </div>
                        </div>

                        <div class="relative bg-gradient-to-r from-brand-800 to-brandsecondary-700 lg:col-start-3 lg:row-start-1 lg:col-span-10 lg:rounded-3xl lg:grid lg:grid-cols-10 lg:items-center">
                            {# BG pattern #}
                            <div class="hidden absolute inset-0 overflow-hidden rounded-3xl lg:block" aria-hidden="true">
                                <svg class="absolute bottom-full left-full transform translate-y-1/3 -translate-x-2/3 xl:bottom-auto xl:top-0 xl:translate-y-0" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
                                    <defs>
                                        <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                            <rect x="0" y="0" width="4" height="4" class="text-brand-500" fill="currentColor" />
                                        </pattern>
                                    </defs>
                                    <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
                                </svg>
                                <svg class="absolute top-full transform -translate-y-1/3 -translate-x-1/3 xl:-translate-y-1/2" width="404" height="384" fill="none" viewBox="0 0 404 384" aria-hidden="true">
                                    <defs>
                                        <pattern id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                            <rect x="0" y="0" width="4" height="4" class="text-brand-500" fill="currentColor" />
                                        </pattern>
                                    </defs>
                                    <rect width="404" height="384" fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)" />
                                </svg>
                            </div>

                            {# Content #}
                            <div class="relative max-w-md mx-auto py-12 px-4 space-y-6 sm:max-w-3xl sm:py-16 sm:px-6 lg:max-w-none lg:p-0 lg:col-start-4 lg:col-span-6">
                                <h2 class="text-3xl font-extrabold text-white" id="join-heading">Sign up to Cheerfully Selling</h2>
                                <p class="text-lg text-white">Make the most of your Cheerfully Given shop. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam.</p>
                                <a href="{{ url('market/training') }}" class="block w-full py-3 px-5 text-center bg-white border border-transparent rounded-md shadow-md text-base font-medium text-brand-700 hover:bg-gray-50 sm:inline-block sm:w-auto">Learn more</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}