@extends('layouts.site', ['title' => $article->title, 'description' => $article->excerpt, 'active' => 'news'])

@section('content')
    <section class="article-hero" id="top">
        <a class="article-back" href="{{ route('news') }}">← ALL STORIES</a>
        <div class="article-hero-copy" data-reveal><p class="micro-label">{{ $article->category }} <span>·</span> {{ $article->published_at->format('F j, Y') }}</p><h1>{{ $article->title }}<span>.</span></h1><p>{{ $article->excerpt }}</p></div>
        <span class="article-hero-mark">AS<span>.</span></span>
    </section>
    <article class="article-body">
        <div class="article-meta"><span>{{ $site['site_title'] }}</span><span>{{ $article->published_at->format('F j, Y') }}</span></div>
        <div class="article-content">
            @foreach($article->sections as $section)
                <section data-reveal><h2>{{ $section['heading'] }}</h2><p>{{ $section['body'] }}</p></section>
            @endforeach
        </div>
    </article>
    @if($related->isNotEmpty())
        <section class="related-stories"><div class="subpage-label"><span>MORE FROM THE JOURNAL</span><i></i><a href="{{ route('news') }}">ALL STORIES ↗</a></div><div class="related-grid">
            @foreach($related as $story)<a href="{{ route('news.show', $story) }}"><small>{{ $story->published_at->format('F j, Y') }} · {{ $story->category }}</small><h3>{{ $story->title }}</h3><span>READ STORY ↗</span></a>@endforeach
        </div></section>
    @endif
@endsection