<?php
/**
 * @var $breadcrumbs
 */

use Johncms\NavChain;

$nav_chain = $container->get(NavChain::class);
$breadcrumbs = $nav_chain->getAll();
$last_item = array_key_last($breadcrumbs);
?>
<?php if (! empty($breadcrumbs)): ?>
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="flex items-center space-x-1 text-sm" vocab="https://schema.org/" typeof="BreadcrumbList">
            <?php foreach ($breadcrumbs as $key => $breadcrumb): ?>
                <li class="flex items-center" property="itemListElement" typeof="ListItem">
                    <?php if ($key > 0): ?>
                        <!-- Separator -->
                        <svg class="h-3 w-3 flex-shrink-0 text-gray-400 mx-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    <?php endif; ?>

                    <?php if (! empty($breadcrumb['url']) && $last_item !== $key): ?>
                        <!-- Clickable breadcrumb -->
                        <a 
                            href="<?= $breadcrumb['url'] ?>" 
                            class="text-gray-500 hover:text-gray-700 hover:underline px-1 py-0.5 rounded transition-colors duration-200" 
                            property="item" 
                            typeof="WebPage"
                            title="<?= $breadcrumb['name'] ?>"
                        >
                            <?php if ($key === 0): ?>
                                <!-- Home icon for first item -->
                                <svg class="h-3 w-3 inline mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            <?php endif; ?>
                            <span property="name" class="truncate max-w-20 sm:max-w-32 md:max-w-40"><?= $breadcrumb['name'] ?></span>
                        </a>
                        <?php if ($last_item === $key): ?>
                            <meta property="name" content="<?= $breadcrumb['name'] ?>">
                        <?php endif; ?>
                    <?php else: ?>
                        <!-- Current page (non-clickable) -->
                        <span 
                            property="name" 
                            class="font-medium text-gray-900 truncate max-w-20 sm:max-w-32 md:max-w-40"
                            title="<?= $breadcrumb['name'] ?>"
                        >
                            <?php if ($key === 0): ?>
                                <!-- Home icon for first item -->
                                <svg class="h-3 w-3 inline mr-1 -mt-0.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            <?php endif; ?>
                            <?= $breadcrumb['name'] ?>
                        </span>
                    <?php endif; ?>
                    <meta property="position" content="<?= ($key + 1) ?>">
                </li>
            <?php endforeach; ?>
        </ol>
    </nav>
<?php endif; ?>