{**
 * Ecommerce copilot
 *
 * @author    businesstech.fr <modules@businesstech.fr> - https://www.businesstech.fr/
 * @copyright Business Tech - https://www.businesstech.fr/
 * @license   see file: LICENSE.txt
 *
 *           ____    _______
 *          |  _ \  |__   __|
 *          | |_) |    | |
 *          |  _ <     | |
 *          | |_) |    | |
 *          |____/     |_|
 *}

{if !empty($previewMode)}
    <div id="btecommercecopilot" class="w-full my-8">
        <nav aria-label="breadcrumb" id="stepper" class="bg-gray-100 shadow-lg rounded-lg px-8 py-4">
            <ol class="flex items-center space-x-4">
                <li id="step1" class="flex items-center {if $step == 1}text-blue-600 font-bold{else if $step == 1}text-green-500{else}text-gray-500{/if}">
                    {if $step > 1}<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg>{/if}
                    <a href="#" class="hover:text-blue-700 transition-colors duration-200">{l s='Settings' mod='btecommercecopilot'}</a>
                </li>
                <li class="text-gray-400">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg>
                </li>
                <li id="step2" class="flex items-center {if $step == 2}text-blue-600 font-bold{else if $step == 2}text-green-500{else}text-gray-500{/if}">
                    {if $step > 2}<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg>{/if}
                    <a href="#" class="hover:text-blue-700 transition-colors duration-200">{l s='Preview' mod='btecommercecopilot'}</a>
                </li>
                <li class="text-gray-400">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg>
                </li>
                <li id="step3" class="flex items-center {if $step == 3}text-blue-600 font-bold{else}text-gray-500{/if}">
                    <a href="#" class="hover:text-blue-700 transition-colors duration-200">{l s='Validation' mod='btecommercecopilot'}</a>
                </li>
            </ol>
        </nav>
    </div>
{/if}