@extends('layouts.app')

@section('body_class', 'page-stories')

@section('content')
{{-- HERO --}}
<section class="ihero shero">
    <span class="chero__orb chero__orb--a" aria-hidden="true"></span>
    <span class="chero__orb chero__orb--b" aria-hidden="true"></span>
    <svg class="ihero__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-book"/></svg>
    <div class="container ihero__grid">
        <div class="ihero__copy">
            <p class="kicker kicker--light">From the field</p>
            <h1>Stories &amp; <span class="hl">updates</span></h1>
            <p class="ihero__lead">Ideas and updates on giving, volunteering and the difference kindness makes.</p>
        </div>
        <ul class="shero__chips" aria-label="About our stories">
            <li><strong>{{ $stories->total() }}</strong><span>{{ \Illuminate\Support\Str::plural('Story', $stories->total()) }}</span></li>
            <li><svg class="i" aria-hidden="true"><use href="#i-camera"/></svg><span>Real updates from the field</span></li>
            <li><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg><span>Ideas to give with purpose</span></li>
        </ul>
    </div>
</section>

<section class="section spage">
    <div class="container">
        @if ($stories->isEmpty())
            <div class="empty"><p>Our first stories are on the way. Please check back soon.</p></div>
        @else
            @php
                $featured = $stories->currentPage() === 1 ? $stories->first() : null;
                $rest = $featured ? $stories->slice(1) : $stories;
            @endphp

            @if ($featured)
                <article class="sfeat reveal">
                    <a class="sfeat__media" href="{{ route('stories.show', $featured) }}" tabindex="-1" aria-hidden="true">
                        @if ($featured->thumb_url)
                            <img src="{{ $featured->thumb_url }}" alt="" width="640" height="360" loading="eager">
                        @else
                            <span class="sfeat__ph"><svg class="i i--xl"><use href="#i-book"/></svg></span>
                        @endif
                        <span class="sfeat__tag">Latest story</span>
                    </a>
                    <div class="sfeat__body">
                        <p class="sfeat__meta">
                            <time datetime="{{ optional($featured->published_at)->toDateString() }}">{{ optional($featured->published_at)->format('j F Y') }}</time>
                            <span>{{ $featured->read_minutes }} min read</span>
                        </p>
                        <h2><a href="{{ route('stories.show', $featured) }}">{{ $featured->title }}</a></h2>
                        <p class="sfeat__ex">{{ $featured->excerpt }}</p>
                        <a class="btn btn--green btn--lg" href="{{ route('stories.show', $featured) }}">Read story <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
                    </div>
                </article>
            @endif

            @if ($rest->isNotEmpty())
                @if ($featured)
                    <header class="spage__head"><p class="kicker">More to read</p><h2>All <span class="hl">stories</span></h2></header>
                @endif
                <ul class="cards cards--stories spage__grid">
                    @foreach ($rest as $story)
                        <li class="reveal">@include('partials.story-card', ['story' => $story])</li>
                    @endforeach
                </ul>
            @endif
            {{ $stories->links() }}
        @endif
    </div>
</section>

<section class="section section--flush spage__cta">
    <div class="container">
        <div class="itrust reveal">
            <svg class="itrust__mark" viewBox="0 0 24 24" aria-hidden="true"><use href="#i-heart"/></svg>
            <div class="itrust__copy">
                <p class="kicker kicker--light">Be part of the next story</p>
                <h2>Make your kindness <span class="hl">count</span></h2>
                <p>Every gift, big or small, helps someone today.</p>
            </div>
            <div class="itrust__btns">
                <a class="btn btn--white btn--lg" href="{{ route('donate') }}"><svg class="i" aria-hidden="true"><use href="#i-heart"/></svg>Donate now</a>
                <a class="btn btn--glass btn--lg" href="{{ route('volunteer') }}"><svg class="i" aria-hidden="true"><use href="#i-users"/></svg>Volunteer</a>
            </div>
        </div>
    </div>
</section>
@endsection