<?php
    if ( ! defined( 'ABSPATH' ) ) exit;
    $steps = 3;
?>
<ol class="flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base">
    <?php
        for ($i = 1; $i <= $steps; $i++):
            $class = in_array($i, $doneSteps) ? 'green' : 'gray';
            $end = $i === $steps ? 'items-center' : "md:w-full items-center text-blue-600 dark:text-blue-500 sm:after:content-[''] after:w-full after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700";
    ?>
        <li class="flex <?php echo esc_attr($end); ?>">
            <span class="size-7 flex justify-center items-center shrink-0 bg-gray-100 font-medium rounded-full bg-<?php echo esc_attr($class); ?>-500 text-white">
                <?php echo esc_html($i); ?>
            </span>
        </li>
    <?php endfor; ?>
</ol>