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

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

{% set breadcrumbs = [
    {
        url: url('market/shipping'),
        label: title
    }
] %}

{% block header %}
    <div class="lg:flex lg:items-center lg:justify-between mb-4">
        <div class="flex-1 min-w-0">
            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
                {{ title }}
            </h1>
        </div>
        {# Actions #}
        <div class="mt-5 flex lg:mt-0 lg:ml-4">

            {# New shipping profile #}
            <div class="relative inline-block text-left">
                <div>
                    <a href="{{ url('market/shipping/new') }}" 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-offset-gray-100 focus:ring-action-500">
                        {# 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 shipping profile'|t('market') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block main %}

    {% set profiles = currentVendor.getShippingProfiles(true) %}

    {% if profiles %}
        <div class="flex flex-col">
            <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                    <div class="shadow overflow-hidden border-b border-gray-200 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">
                                        Name
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Processing Time
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                            {% for profile in profiles %}
                                <tr>
                                    <td class="px-6 py-4 max-w-xs text-sm font-medium">
                                        <a href="{{ url('market/shipping/'~profile.id) }}" class="text-action-600 hover:text-action-900">{{ profile.name }}</a>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ profile.getProcessingTimeLabel() }}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {# No profiles at all yet #}
        <div class="rounded-md shadow-md bg-orange-100 border border-orange-300 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    {# Heroicon name: light-bulb #}
                    <svg class="h-5 w-5 text-orange-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-orange-800">
                        Nothing here …
                    </h3>
                    <div class="mt-2 text-sm text-orange-700 space-y-2">
                        <p>You don’t have any shipping profiles yet, go ahead and create one!</p>
                    </div>
                    <div class="mt-4">
                        <div class="-mx-2 -my-1.5 flex">
                            <a href="{{ url('market/shipping/new') }}"class="bg-orange-100 px-2 py-1.5 rounded-md text-sm font-medium text-orange-800 hover:bg-orange-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-100 focus:ring-orange-600">
                                Create new shipping profile
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}