@extends('web.layouts.app', ['title' => 'Stories / Rankings / Notifications'])
@section('content')
<div class="grid grid-3">
    <section class="card">
        <h2>Stories</h2>
        @foreach($stories as $story)
            <p><strong>{{ $story->user?->username ?? 'user' }}</strong><br>{{ $story->caption }} <span class="pill">{{ $story->privacy }}</span></p>
        @endforeach
    </section>
    <section class="card">
        <h2>Rankings</h2>
        <table class="table"><tr><th>Scope</th><th>User</th><th>Score</th></tr>
        @foreach($rankings as $rank)
            <tr><td>{{ $rank->scope }}</td><td>#{{ $rank->user_id }}</td><td>{{ number_format($rank->score) }}</td></tr>
        @endforeach
        </table>
    </section>
    <section class="card">
        <h2>Notifications</h2>
        @foreach($notifications as $notification)
            <p><strong>{{ $notification->title }}</strong><br><span class="muted">{{ $notification->body }}</span></p>
        @endforeach
    </section>
</div>
@endsection