@extends('layouts.app')

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

@section('content')
{{-- HERO --}}
<section class="ihero sshow">
    <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 narrow-wide">
        <a class="sshow__back" href="{{ route('stories') }}"><svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg>All stories</a>
        <p class="kicker kicker--light">Story</p>
        <h1>{{ $story->title }}</h1>
        <p class="sshow__meta">
            <span><svg class="i" aria-hidden="true"><use href="#i-check"/></svg><time datetime="{{ optional($story->published_at)->toDateString() }}">{{ optional($story->published_at)->format('j F Y') }}</time></span>
            <span><svg class="i" aria-hidden="true"><use href="#i-book"/></svg>{{ $story->read_minutes }} min read</span>
            @if ($story->author)<span><svg class="i" aria-hidden="true"><use href="#i-user"/></svg>By {{ $story->author }}</span>@endif
        </p>
    </div>
</section>

<article class="section sshow__article">
    <div class="container narrow-wide">
        @if ($story->image_url)
            <img class="story-hero sshow__img" src="{{ $story->image_url }}" srcset="{{ $story->thumb_url }} 640w, {{ $story->image_url }} 1600w" sizes="(min-width: 800px) 880px, 100vw" alt="{{ $story->title }}" width="1200" height="675" fetchpriority="high" decoding="async">
        @endif

        <div class="sshow__card">
            <div class="prose">
                <p class="lead">{{ $story->excerpt }}</p>
                {!! $story->body !!}
            </div>

            @include('partials.share', ['url' => $url, 'text' => $story->title])
        </div>

        <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">Inspired by this 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>
</article>

@if ($more->isNotEmpty())
<section class="section section--soft">
    <div class="container">
        <header class="section__head">
            <p class="kicker">Keep reading</p>
            <h2>More <span class="hl">stories</span></h2>
        </header>
        <ul class="cards cards--stories">
            @foreach ($more as $s)
                <li class="reveal">@include('partials.story-card', ['story' => $s])</li>
            @endforeach
        </ul>
    </div>
</section>
@endif
@endsection