@push('css')
<style>
.safety-information-card {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.safety-information-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.safety-information-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.safety-information-card .safety-information-title {
    color: #333;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.safety-information-card .safety-information-title:hover {
    color: #667eea;
    cursor: pointer;
}

.safety-information-item {
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
}

.safety-information-item:hover {
    background-color: #f8f9fa;
}

.safety-information-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
}

.status-published .fa-circle { color: #28a745; }
.status-draft .fa-circle { color: #ffc107; }
.status-archived .fa-circle { color: #6c757d; }

.safety-information-feed {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.safety-information-feed::-webkit-scrollbar {
    width: 4px;
}

.safety-information-feed::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.safety-information-feed::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.safety-information-feed::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.card-footer {
    border-top: 1px solid #eaeaea;
}
</style>
@endpush

<div class="card safety-information-card">
        <!-- Card Header with Status Badge -->
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title mb-0">{{ __('labels.safety_information') }}</h4>
            @if(isset($safetyInformation['count']) && $safetyInformation['count'])
                <span class="badge bg-white text-primary">
                   {{ __('labels.total') }} : {{ $safetyInformation['count'] ?? '' }} 
                </span>
            @endif
        </div>

        <!-- Card Body -->
        <div class="card-body safety-information-feed">
            @forelse($safetyInformation['list'] as $index => $item)
            <div class="safety-information-item mb-3 pb-3 border-bottom">
                <!-- safety_informations Type Badge -->
                <div class="d-flex justify-content-between align-items-start mb-2">
                    @if($item?->category?->title)
                        <span class="type-badge  badge rounded-pill text-bg-primary">
                            <i class="fas fa-folder"></i>
                            {{ $item?->category?->title }}
                        </span>
                    @endif
                    <small class="text-muted">
                         {{ date('M d, h:i A', strtotime($item['published_at'])) }}
                    </small>
                </div>
                
                <!-- safety_informations Title -->
                <h6 class="safety-information-title fw-bold mb-2">
                    @if($item['is_locked'])
                        <i class="fas fa-lock text-warning me-1"></i>
                    @endif
                    @if($item['is_approved'])
                        <i class="fas fa-check-circle text-success me-1"></i>
                    @endif
                     {{ htmlspecialchars($item['title']) }}
                </h6>
                
                <!-- safety_informations Description Preview -->
                <p class="safety-information-description text-muted small mb-2">
                     {{ Str::limit($item['description'], 80, '...') }}
                </p>
                
                <!-- Footer Stats -->
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center invisible">
                        <!-- View Count -->
                        <span class="me-3 text-muted small">
                            <i class="fas fa-eye me-1"></i>
                             {{ number_format($item['view_count']) }}
                        </span>
                        
                        <!-- Like Count -->
                        <span class="text-muted small">
                            <i class="fas fa-heart text-danger me-1"></i>
                             {{ number_format($item['like_count']) }}
                        </span>
                    </div>
                    
                    <!-- Status Indicator -->
                    {{-- <span class="status-indicator status-{{ $item['status'] ?? '' }}">
                        <i class="fas fa-circle me-1"></i>
                        {{ ucfirst($item['status']) }} 
                    </span> --}}
                </div>
            </div>
            @empty
            <!-- No safety_informations Message -->
            <div class="text-center py-4">
                <i class="fas fa-newspaper fa-3x text-muted mb-3"></i>
                <p class="text-muted">{{ __('labels.no_safety_information_yet') }}</p>
            </div>
            @endforelse
        </div>

        <!-- Card Footer -->
        <div class="card-footer text-center bg-light">
            @if(auth()->user()->can('create', \App\Models\SafetyInformation::class))
            <a href="{{ route('safety-information.create') }}" target="_blank" class="btn btn-sm btn-primary">
                <i class="fas fa-plus me-1"></i> {{ __('labels.add_new') }}
            </a>
            @endif
            <a href="{{ route('safety-information.index') }}" target="_blank" class="btn btn-sm btn-outline-secondary ms-2">
                {{ __('labels.view_all') }} <i class="fas fa-arrow-right ms-1"></i>
            </a>
        </div>
    </div>

@push('js')
<script>
// Add interactivity
document.addEventListener('DOMContentLoaded', function() {
    // Make safety_informations items clickable
    document.querySelectorAll('.safety-information-title').forEach(title => {
        title.addEventListener('click', function() {
            // Add your click handler here
            console.log('safety-information clicked:', this.textContent);
        });
    });

    // Auto-refresh safety_informations every 30 seconds (optional)
    setInterval(function() {
        // Add your refresh logic here
        console.log('Refreshing Safety Information ...');
    }, 30000);
});
</script>
@endpush