@extends('layouts.app')
@section('title', $article['title'])

@section('content')
<article>
    <header class="relative isolate overflow-hidden bg-ink py-24 text-white">
        <img src="{{ $article['image_url'] }}" alt="" class="absolute inset-0 -z-20 h-full w-full object-cover opacity-40">
        <div class="absolute inset-0 -z-10 bg-linear-to-t from-ink via-ink/70 to-ink/30"></div>
        <div class="mx-auto max-w-3xl px-4 sm:px-6">
            <span class="rounded-full bg-gold/20 px-3 py-1 text-xs font-bold uppercase tracking-wider text-gold-light">{{ $article['tag'] }}</span>
            <h1 class="mt-4 font-display text-4xl font-bold leading-tight sm:text-6xl">{{ $article['title'] }}</h1>
            <p class="mt-4 text-sm text-white/60">{{ $article['date'] ?? '' }}</p>
        </div>
    </header>

    <div class="mx-auto max-w-3xl space-y-5 px-4 py-14 text-lg leading-relaxed text-slate-700 sm:px-6">
        @foreach ($article['body'] as $p)
            <p>{{ $p }}</p>
        @endforeach
        <a href="{{ route('news') }}" class="btn btn-outline mt-6">&larr; {{ __('All news') }}</a>
    </div>
</article>

@if (count($others))
<section class="mx-auto max-w-7xl px-4 pb-8 sm:px-6 lg:px-8">
    <h2 class="font-display text-3xl font-bold text-navy">{{ __('More stories') }}</h2>
    <div class="mt-6 grid gap-6 md:grid-cols-2">
        @foreach ($others as $s => $a)
            <x-news-card :slug="$s" :article="$a" />
        @endforeach
    </div>
</section>
@endif
@endsection