@extends('layouts.app')

@section('title', 'Blog')

@section('content')
@php
    $read = fn ($b) => max(1, (int) ceil(str_word_count(strip_tags((string) $b->content)) / 200));
    $first = $blogs->first();
    $rest = $blogs->slice(1)->values();
@endphp
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>Our blog</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><span>Blog</span></nav>
  </div>
</div>

<main class="bl-wrap">
  @if ($first)
  <a class="bl-feature" href="{{ route('blog.show', $first->slug) }}">
    <span class="bl-img">@if ($first->image_url)<img src="{{ $first->image_url }}" alt="{{ $first->title }}">@endif</span>
    <span class="bl-info">
      <small class="bl-meta"><b>Latest</b> {{ \Illuminate\Support\Carbon::parse($first->created_at)->format('d M Y') }} <i></i> {{ $read($first) }} min read</small>
      <h2>{{ $first->title }}</h2>
      <p>{{ $first->excerpt }}</p>
      <u>Read the story <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></u>
    </span>
  </a>

  @if ($rest->count())
  <div class="bl-grid">
    @foreach ($rest as $b)
      <a class="bl-card" href="{{ route('blog.show', $b->slug) }}">
        <span class="bl-img">@if ($b->image_url)<img src="{{ $b->image_url }}" alt="{{ $b->title }}" loading="lazy">@endif</span>
        <small class="bl-meta">{{ \Illuminate\Support\Carbon::parse($b->created_at)->format('d M Y') }} <i></i> {{ $read($b) }} min read</small>
        <h3>{{ $b->title }}</h3>
        <p>{{ \Illuminate\Support\Str::limit($b->excerpt, 120) }}</p>
        <u>Read more <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></u>
      </a>
    @endforeach
  </div>
  @endif
  @else
    <p class="empty">No posts yet. Please check back soon.</p>
  @endif
</main>
@endsection