<!-- Main Container -->
<div class="max-w-6xl mx-auto p-4 space-y-6">

    <!-- Header Section -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-700 rounded-2xl shadow-lg overflow-hidden">
        <div class="p-6 text-white">
            <div class="flex items-center space-x-3 mb-2">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                </svg>
                <h1 class="text-2xl font-bold">
                    <a href="?" class="hover:text-blue-100 transition duration-200"><?= __('Library') ?></a>
                    <span class="mx-3 text-blue-200">|</span>
                    <span class="text-white"><?= __('Tag Cloud') ?></span>
                </h1>
            </div>
            <p class="text-blue-100 text-sm opacity-90">
                <?= __('Explore popular topics and categories in our library') ?>
            </p>
        </div>
    </div>

    <!-- Sort Menu -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"/>
                </svg>
                <span class="font-medium text-gray-700 dark:text-gray-300"><?= __('Sort') ?>:</span>
            </div>
            <div class="flex flex-wrap gap-2">
                <?= $menu ?>
            </div>
        </div>
    </div>

    <!-- Tag Cloud -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <div class="text-center mb-6">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2"><?= __('Popular Tags') ?></h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">
                <?= __('Click on any tag to explore related content') ?>
            </p>
        </div>
        
        <div class="flex flex-wrap gap-3 justify-center min-h-[200px] items-start">
            <?= $cloud ?>
        </div>
        
        <?php if (empty($cloud)): ?>
            <div class="text-center py-12">
                <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2"><?= __('No tags available') ?></h3>
                <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
                    <?= __('Tags will appear as content is added to the library.') ?>
                </p>
            </div>
        <?php endif; ?>
    </div>

    <!-- Back to Library -->
    <div class="text-center">
        <a href="?" class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl shadow-sm hover:shadow-md transition duration-200 font-medium group">
            <svg class="w-5 h-5 mr-2 transform group-hover:-translate-x-1 transition duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            <?= __('Back to Library') ?>
        </a>
    </div>

</div>
