@extends('layouts.app')

@section('content')

<div class="mb-6 flex items-center justify-between">

    <!-- Back -->
    <button onclick="window.history.back()"
            class="mb-6 inline-flex items-center gap-2 bg-gray-800 border border-gray-700 px-4 py-2 rounded-lg shadow-sm hover:bg-gray-700 text-gray-300 transition">
        ← Back
    </button>

    <!-- Title -->
    <h1 class="text-2xl font-bold capitalize text-center flex-1">
        {{ str_replace('_', ' ', $type) }} Contests
    </h1>

    <div class="w-[80px]"></div>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

    @forelse($contests as $contest)
        <a href="{{ url('/contest/' . $contest->slug) }}"
           class="bg-[#111827] border border-gray-800 p-6 rounded-xl hover:border-red-600 hover:shadow-lg transition">

            <h2 class="text-lg font-semibold">
                {{ $contest->title }}
            </h2>

            <p class="text-gray-400 mt-2">
                {!! $contest->description !!}
            </p>

            <p class="text-sm text-gray-500 mt-4">
                 Ends: {{ $contest->end_at }}
            </p>

        </a>
    @empty
        <p class="text-center text-gray-500 col-span-2">
            No contests found.
        </p>
    @endforelse

</div>

@endsection