<?php

/**
 * This file is part of JohnCMS Content Management System.
 *
 * @copyright JohnCMS Community
 * @license   https://opensource.org/licenses/GPL-3.0 GPL-3.0
 * @link      https://johncms.com JohnCMS Project
 */

/**
 * @var $title
 * @var $page_title
 * @var $sections
 * @var $online
 * @var $files_count
 * @var $unread_count
 * @var \Forum\Models\ForumSection $section
 * @var \Forum\Models\ForumSection $subsection
 */

$this->layout(
    'system::layout/default',
    [
        'title'      => $title,
        'page_title' => $page_title,
    ]
);
?>

<?= $this->fetch(
    'forum::header',
    [
        'unread_count' => $unread_count,
        'files_count'  => $files_count,
        'files_url'    => '/forum/?act=files',
        'files_name'   => __('Files'),
    ]
) ?>

<div class="space-y-4">
    <?php foreach ($sections as $section): ?>
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <!-- Section Header -->
            <div class="border-b border-gray-200 p-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <a href="<?= $section->url ?>" class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">
                            <?= $section->name ?>
                        </a>
                        <span class="ml-3 px-2 py-1 bg-gray-100 text-gray-700 text-sm font-medium rounded-full">
                            <?= ($section->section_type ? $section->topics_count : $section->subsections_count) ?>
                        </span>
                    </div>
                    
                    <?php if (! empty($section->subsections_count)): ?>
                        <button type="button" 
                                class="subsection-toggle p-2 text-gray-400 hover:text-gray-600 transition-colors"
                                data-section="<?= $section->id ?>">
                            <svg class="w-5 h-5 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Subsections -->
            <?php if (! empty($section->subsections_count)): ?>
                <div id="subsections_<?= $section->id ?>" class="hidden border-t border-gray-200">
                    <div class="p-4">
                        <div class="space-y-2">
                            <?php foreach ($section->subsections as $subsection): ?>
                                <div class="flex items-center">
                                    <span class="text-gray-400 mr-2">›</span>
                                    <a href="<?= $subsection->url ?>" class="text-gray-700 hover:text-blue-600 transition-colors">
                                        <?= $subsection->name ?>
                                    </a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            <?php endif; ?>

            <!-- Description -->
            <?php if (! empty($section->description)): ?>
                <div class="border-t border-gray-200 p-4">
                    <div class="text-sm text-gray-600"><?= $section->description ?></div>
                </div>
            <?php endif ?>
        </div>
    <?php endforeach; ?>
</div>

<?= $this->fetch(
    'forum::footer',
    [
        'online'   => $online,
        'who_url'  => '/forum/?act=who',
        'who_name' => __('Who in Forum'),
    ]
) ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle subsection toggles
    document.querySelectorAll('.subsection-toggle').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const sectionId = this.getAttribute('data-section');
            const subsections = document.getElementById('subsections_' + sectionId);
            const icon = this.querySelector('svg');
            
            // Toggle visibility
            subsections.classList.toggle('hidden');
            
            // Rotate icon
            icon.classList.toggle('rotate-180');
        });
    });
});

// Add rotate utility class if not present
if (!document.querySelector('style').textContent.includes('rotate-180')) {
    const style = document.createElement('style');
    style.textContent = `
        .rotate-180 {
            transform: rotate(180deg);
        }
        .transition-transform {
            transition: transform 0.2s ease-in-out;
        }
    `;
    document.head.appendChild(style);
}
</script>