<?php $__env->startSection('title', $category->name . ' - IDN Menulis'); ?>

<?php $__env->startSection('content'); ?>
<!-- Hero Header -->
<section class="bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl mb-4">
            <span class="text-3xl"><?php echo e($category->icon ?? '📁'); ?></span>
        </div>
        <h1 class="text-4xl lg:text-5xl font-bold font-display text-white mb-4"><?php echo e($category->name); ?></h1>
        <?php if($category->description): ?>
        <p class="text-primary-100 text-lg max-w-2xl mx-auto"><?php echo e($category->description); ?></p>
        <?php else: ?>
        <p class="text-primary-100 text-lg max-w-2xl mx-auto">Temukan artikel menarik seputar <?php echo e($category->name); ?></p>
        <?php endif; ?>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="lg:grid lg:grid-cols-4 lg:gap-8">

        <!-- Sidebar -->
        <aside class="hidden lg:block">
            <!-- Search -->
            <div class="bg-white rounded-2xl p-6 shadow-sm mb-6">
                <h3 class="font-bold text-gray-900 mb-4">Cari Artikel</h3>
                <form action="<?php echo e(route('articles.search')); ?>" method="GET">
                    <div class="relative">
                        <input type="text" name="q" value="<?php echo e(request('q')); ?>" placeholder="Kata kunci..."
                               class="w-full py-3 pl-4 pr-12 rounded-xl border border-gray-200 focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20">
                        <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>

            <!-- Categories -->
            <div class="bg-white rounded-2xl p-6 shadow-sm">
                <h3 class="font-bold text-gray-900 mb-4">Kategori Lainnya</h3>
                <div class="space-y-2">
                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <a href="<?php echo e(route('categories.show', $cat->slug)); ?>"
                       class="flex items-center justify-between p-3 rounded-xl transition-colors group <?php echo e($cat->id === $category->id ? 'bg-primary-50 ring-1 ring-primary-200' : 'hover:bg-primary-50'); ?>">
                        <div class="flex items-center gap-3">
                            <span class="text-xl"><?php echo e($cat->icon ?? '📁'); ?></span>
                            <span class="font-medium <?php echo e($cat->id === $category->id ? 'text-primary-600' : 'text-gray-700 group-hover:text-primary-600'); ?>"><?php echo e($cat->name); ?></span>
                        </div>
                        <span class="text-sm <?php echo e($cat->id === $category->id ? 'text-primary-500' : 'text-gray-400'); ?>"><?php echo e($cat->articles_count); ?></span>
                    </a>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="lg:col-span-3">
            <!-- Mobile Search -->
            <div class="lg:hidden bg-white rounded-2xl p-4 shadow-sm mb-6">
                <form action="<?php echo e(route('articles.search')); ?>" method="GET" class="flex gap-2">
                    <input type="text" name="q" value="<?php echo e(request('q')); ?>" placeholder="Cari artikel..."
                           class="flex-1 py-2.5 px-4 rounded-xl border border-gray-200 focus:outline-none focus:border-primary-500">
                    <button type="submit" class="px-4 py-2.5 bg-primary-500 text-white rounded-xl hover:bg-primary-600 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </button>
                </form>
            </div>

            <!-- Results Count -->
            <div class="flex items-center justify-between mb-6">
                <p class="text-gray-600">
                    Menampilkan <span class="font-semibold text-gray-900"><?php echo e($articles->count()); ?></span> dari
                    <span class="font-semibold text-gray-900"><?php echo e($articles->total()); ?></span> artikel
                </p>

                <!-- Breadcrumb -->
                <nav class="hidden sm:flex items-center gap-2 text-sm">
                    <a href="<?php echo e(route('home')); ?>" class="text-gray-500 hover:text-primary-500 transition-colors">Beranda</a>
                    <svg class="w-4 h-4 text-gray-400" 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"/>
                    </svg>
                    <span class="text-gray-900 font-medium"><?php echo e($category->name); ?></span>
                </nav>
            </div>

            <!-- Articles Grid -->
            <div class="grid sm:grid-cols-2 xl:grid-cols-3 gap-6">
                <?php $__empty_1 = true; $__currentLoopData = $articles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $article): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <article class="group bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 card-hover">
                    <!-- Image -->
                    <div class="relative h-48 overflow-hidden">
                        <?php if($article->featured_image): ?>
                        <img src="<?php echo e(Storage::url($article->featured_image)); ?>" alt="<?php echo e($article->title); ?>"
                             class="w-full h-full object-cover img-zoom">
                        <?php else: ?>
                        <div class="w-full h-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
                            <span class="text-6xl opacity-50"><?php echo e($category->icon ?? '📁'); ?></span>
                        </div>
                        <?php endif; ?>

                        <div class="absolute top-3 left-3">
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-white/90 backdrop-blur-sm rounded-lg text-xs font-medium text-gray-800">
                                <span><?php echo e($category->icon ?? '📁'); ?></span>
                                <?php echo e($category->name); ?>

                            </span>
                        </div>

                        <div class="absolute top-3 right-3">
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-black/50 backdrop-blur-sm rounded-lg text-xs text-white">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                <?php echo e($article->reading_time ?? 5); ?> min
                            </span>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="p-5">
                        <h2 class="font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-primary-600 transition-colors">
                            <a href="<?php echo e(route('articles.show', $article->slug)); ?>"><?php echo e($article->title); ?></a>
                        </h2>

                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">
                            <?php echo e(Str::limit($article->excerpt ?? strip_tags($article->content), 100)); ?>

                        </p>

                        <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                            <div class="flex items-center gap-2">
                                <img src="<?php echo e($article->user->avatar ? Storage::url($article->user->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($article->user->full_name) . '&background=14b8a6&color=fff&size=32'); ?>"
                                     alt="<?php echo e($article->user->full_name); ?>" class="w-7 h-7 rounded-lg object-cover">
                                <span class="text-sm text-gray-600"><?php echo e($article->user->full_name); ?></span>
                            </div>
                            <div class="flex items-center gap-2 text-xs text-gray-500">
                                <span class="flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    <?php echo e(number_format($article->views_count)); ?>

                                </span>
                                <span class="flex items-center gap-1">
                                    <svg class="w-3.5 h-3.5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                    </svg>
                                    <?php echo e($article->likedBy()->count()); ?>

                                </span>
                            </div>
                        </div>
                    </div>
                </article>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-span-full py-16 text-center">
                    <div class="w-20 h-20 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <span class="text-4xl"><?php echo e($category->icon ?? '📁'); ?></span>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Belum Ada Artikel</h3>
                    <p class="text-gray-500 mb-6">Belum ada artikel dalam kategori <?php echo e($category->name); ?></p>
                    <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(route('articles.create')); ?>" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                        </svg>
                        Tulis Artikel
                    </a>
                    <?php else: ?>
                    <a href="<?php echo e(route('articles.index')); ?>" class="inline-flex items-center gap-2 px-6 py-3 bg-primary-500 text-white rounded-xl font-medium hover:bg-primary-600 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        Lihat Semua Artikel
                    </a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>

            <!-- Pagination -->
            <?php if($articles->hasPages()): ?>
            <div class="mt-10">
                <?php echo e($articles->links()); ?>

            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\IDNMenulis\resources\views/articles/category.blade.php ENDPATH**/ ?>