@push('css')
<style>
        .active-folder-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .active-folder-header .folder-info {
            color: white;
        }

        .active-folder-header .folder-info i {
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
        }

        .active-folder-header .folder-info .h4 {
            color: white;
            font-weight: 600;
            margin-bottom: 0;
        }

        .active-folder-header .badge {
            font-size: 0.9rem;
            padding: 0.35rem 0.75rem;
            vertical-align: middle;
        }



        .btn-back-categories {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            transition: all 0.3s ease;
        }

        .btn-back-categories:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(-3px);
            color: white;
        }

        .btn-back-categories i {
            margin-right: 5px;
        }

        .btn-action-header {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            margin-left: 0.5rem;
            transition: all 0.3s ease;
        }

        .btn-action-header:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            color: white;
        }
</style>
@endpush


<div class="col-xl-12">
    <div class="active-folder-header">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center folder-info">
                <i class="fa fa-folder-open fa-3x text-warning me-3"></i>
                <div>
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <span class="h4 mb-0" id="activeFolderName">
                            @if (isset($currentCategory) && $currentCategory)
                                <i class="fa fa-tag me-1"></i>
                                {{ $currentCategory->title }}
                            @else
                                <i class="fa fa-folder me-1"></i>
                                {{ __('labels.all_items') }}
                            @endif
                        </span>
                        {{-- 
                            @if ($currentCategory->is_active)
                                <span class="badge bg-success">{{ __('labels.active') }}</span>
                            @else
                                <span class="badge bg-secondary">{{ __('labels.inactive') }}</span>
                            @endif 
                        --}}
                        <span class="badge bg-primary" id="activeFolderCount">
                            <i class="fa fa-database me-1"></i>
                            {{ $totalItems ?? 0 }} {{ __('labels.items') }}
                        </span>
                        @if (isset($currentCategory) && $currentCategory)
                            <span class="badge bg-info">
                                <i class="fa fa-folder-open me-1"></i>
                                {{ __('labels.currently_viewing') }}
                            </span>
                        @endif
                    </div>
                    @if ($currentCategory && $currentCategory && $currentCategory->description)
                        <small class="d-block mt-2 opacity-75" title="{{ $currentCategory->description }}">
                            <i class="fa fa-info-circle me-1"></i>
                            {{ Str::limit($currentCategory->description, 40, '  ...') }}
                        </small>
                    @endif
                    @if (isset($currentCategory) && $currentCategory)
                        <div class="mt-2">
                            <small class="opacity-75">
                                <i class="fa fa-user me-1"></i>
                                {{ __('labels.created_by') }}:
                                {{ $currentCategory->author_name ?? ($currentCategory->creator?->name ?? 'System') }}
                            </small>
                            <small class="opacity-75 ms-3">
                                <i class="fa fa-calendar me-1"></i>
                                {{ __('labels.created_at') }}: {{ $currentCategory->created_at?->format('d.m.Y H:i') }}
                            </small>
                        </div>
                    @endif
                </div>
            </div>
            <div>
                {{-- @if (isset($currentCategory) && $currentCategory) --}}
                    <a href="{{ route('themed-world-categories.index') }}" class="btn btn-back-categories">
                        <i class="fa fa-arrow-left"></i>
                        {{ __('labels.all_categories') }}
                        {{-- {{ __('labels.back_to_categories') }} --}}
                    </a>
                {{-- @endif --}}
                {{-- <button class="btn btn-action-header" id="sortItemsBtn" title="{{ __('labels.sort') }}">
                    <i class="fa fa-sort"></i>
                </button>
                <button class="btn btn-action-header" id="filterItemsBtn" title="{{ __('labels.filter') }}">
                    <i class="fa fa-filter"></i>
                </button> --}}
            </div>
        </div>
    </div>
</div>