@extends('layouts.app')

@section('title', __('radio.contests') . ' - ' . config('app.name'))

@section('content')
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <div class="bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-white">
            <h2 class="text-2xl font-bold mb-6">{{ __('radio.active_contests') }}</h2>

            @if(session('error'))
                <div class="bg-red-500 text-white p-4 rounded mb-4">
                    {{ session('error') }}
                </div>
            @endif

            @if($contests->isEmpty())
                <div class="bg-gray-700 p-6 rounded-lg text-center">
                    <p class="text-gray-300">{{ __('radio.no_contests') }}</p>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($contests as $contest)
                        <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg">
                            <div class="p-6">
                                <h3 class="text-xl font-bold mb-2">{{ $contest->title }}</h3>
                                <p class="text-gray-300 mb-4 line-clamp-3">{{ $contest->description }}</p>
                                
                                <div class="flex justify-between items-center text-sm text-gray-400 mb-4">
                                    <span>{{ __('radio.ends_in', ['time' => $contest->ends_at->diffForHumans()]) }}</span>
                                    <span>{{ $contest->entryCount() }} {{ __('radio.participants') }}</span>
                                </div>

                                <a href="{{ route('radio.contests.show', $contest) }}" class="block w-full bg-indigo-600 hover:bg-indigo-700 text-center text-white font-bold py-2 px-4 rounded transition duration-200">
                                    {{ __('radio.view_participate') }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection